[$250] iOS - Workspace - Workspace settings gray out briefly after swiping back

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.37-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #84651
Email or phone of affected tester (no customers): sdjsdjosijnsodiosd@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPhone 15 Pro Max / iOS 26.3
App Component: Workspace Settings

Action Performed:

1. Launch Expensify app.
2. Go to workspace settings > More features (or any page in workspace settings).
3. Swipe back to return to workspace settings.

Expected Result:

Workspace settings will not gray out after swiping back.

Actual Result:

Workspace settings gray out briefly after swiping back.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7101680_1773361049211.ScreenRecording_03-13-2026_08-16-05_1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @situchan

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022033460292700059005
• Upwork Job ID: 2033460292700059005
• Last Price Increase: 2026-03-16

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #84651

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #84651 - "Reduce desktop LHN row height to 44px" by @MelvinBot (High confidence)
Related Issues: None

Recommendation: REVERT

PR #84651 should be reverted as it introduces a bug in the HighlightableMenuItem component that causes workspace settings to gray out briefly after swiping back on iOS.

Labels: Keeping DeployBlockerCash (App deploy blocked), removing DeployBlocker (backend not affected)

Detailed Analysis

Evidence

PR #84651 was merged on 2026-03-12 at 13:16:33 UTC, which aligns with when this bug was reported. The PR modified the HighlightableMenuItem component, which is used by the workspace settings menu items that exhibit the graying out behavior described in this issue.

The issue is:

1. Only reproducible on staging (where PR Reduce desktop LHN row height to 44px #84651 is deployed)
2. Not reproducible on production (where PR Reduce desktop LHN row height to 44px #84651 is not yet deployed)
3. Affects workspace settings specifically, which uses HighlightableMenuItem
4. Occurs on iOS when navigating back, triggering the highlight animation

Verification

Files affected by the reported bug:

• /home/runner/_work/App/App/src/pages/workspace/WorkspaceInitialPage.tsx - Displays workspace menu items using HighlightableMenuItem
• /home/runner/_work/App/App/src/components/HighlightableMenuItem.tsx - Component that handles the highlight animation

PR #84651 modified both of these files:

• Changed sectionMenuItem from a static style object to a dynamic function that accepts shouldUseNarrowLayout parameter
• Updated HighlightableMenuItem.tsx to call styles.sectionMenuItem(true) with a hardcoded value instead of using the actual layout context

Root Cause

PR #84651 converted styles.sectionMenuItem from a static style to a dynamic function to support different heights on desktop (44px) vs mobile (52px). However, in HighlightableMenuItem.tsx (lines 22-23), the fallback for animation height calculation was hardcoded to styles.sectionMenuItem(true):

height: flattenedWrapperStyles?.height ? Number(flattenedWrapperStyles.height) : styles.sectionMenuItem(true).height,
borderRadius: flattenedWrapperStyles?.borderRadius ? Number(flattenedWrapperStyles.borderRadius) : styles.sectionMenuItem(true).borderRadius,

The hardcoded true means the component always assumes narrow layout (52px) for the animation fallback, but it does not have access to the actual shouldUseNarrowLayout value from the parent component context. This creates a mismatch between the expected animation dimensions and the actual rendered item dimensions, causing the visual glitch where workspace settings gray out briefly during navigation transitions.

The component should receive the shouldUseNarrowLayout parameter from its parent or use a hook to determine the correct layout, rather than hardcoding the value.