Skip to content

iPad - Main menu in Liquid Glass UI on iPad (iPadOS 27) is located at the top and small #104423

Open

Description

@applause-bot

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.


Version Number: 9.5.14-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exp
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPad 9th Gen 10" / iPadOS 27.0.1
App Component: Other

Action Performed:

  1. Open Expensify App on iPad with iPadOS 27
  2. Login with any account
  3. Check what the main menu looks like and where it is located

Expected Result:

The main menu is located at the bottom of the screen and is of a standard size for Liquid Glass UI

Actual Result:

The main menu is located at the top of the screen and is small in size which differs from the Liquid Glass UI standards.

Workaround:

Unknown

Platforms:

  • Android: App
  • Android: mWeb Chrome
  • iOS: iPad (iPadOS 27)
  • iOS: mWeb Safari
  • iOS: mWeb Chrome
  • Windows: Chrome
  • MacOS: Chrome Safari

Screenshots/Videos

Image Image

View all open jobs on GitHub

Applause Internal Information
Exported by: Svetlana Lazutkina
Bug ID: 7290614

Issue OwnerCurrent Issue Owner: @ZhenjaHorbach

Activity

  1. added
    DeployBlockerCashThis issue or pull request should block deployment
    BugSomething is broken. Auto assigns a BugZero manager.
    on Oct 19, 2026
  2. melvin-bot commented on Oct 19, 2026

    @melvin-bot

    Triggered auto assignment to @stitesExpensify (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

  3. melvin-bot commented on Oct 19, 2026

    @melvin-bot

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

  4. github-actions commented on Oct 19, 2026

    @github-actions
    Contributor

    👋 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.
  5. MelvinBot commented on Oct 19, 2026

    @MelvinBot
    Contributor

    Deploy Blocker Analysis

    Causing PR: Add liquid glass bottom tab bar to iOS, Android and mWeb, which is not part of 9.5.14. It merged on 2026-10-15. It shipped in Deploy Checklist: New Expensify 2026-10-16, and that release went to production today. So this bug should already reproduce on production (9.5.13-6) on iPadOS 26+. The issue's "N/A - new feature" note is out of date.

    Recommendation: demote and fix forward. Don't revert anything. No PR in the current Deploy Checklist: New Expensify 2026-10-19 changes where the tab bar sits. Every tab still works; the bar is only small and its labels are cut off. Confirm the bug reproduces on production 9.5.13-6, then remove DeployBlockerCash.

    Confidence: High.

    Root cause
    • On iPadOS 18 and later, a UITabBarController in a regular-width layout draws a small floating tab bar at the top. This is the default UIKit behavior.
    • The App sets tabBarControllerMode: 'tabBar'. That setting only turns off the sidebar. It doesn't move the bar to the bottom. Moving it needs a compact horizontalSizeClass trait override. Neither react-native-screens 4.28.0 nor the App's patches set one.
    • On native, useResponsiveLayout hardcodes isSmallScreenWidth = true. As a result, NativeTabLayout always uses the native bar on iPad.
    • Each tab label is drawn into its icon image, which is sized for a phone's bottom bar. The compact top bar shrinks those images, so the labels get cut off ("ccour", "Spend'" in the screenshots).

    Ruled out: Fix bottom tab appears on non-root paths after killing and relaunching the app is the only 9.5.14 PR that touches this navigator. It only controls whether the bar is visible, not where it sits.

    Fix options
    1. Patch react-native-screens to set traitOverrides.horizontalSizeClass = .compact on the tab bar controller, and set it back to regular on the child view controllers.
    2. Or use the JS tab bar instead of the native one on iPad.
    3. With either option, size the labels from the real bar width, or stop drawing labels into the icons in regular width.

    Possible owners: sumo-slonik (PR author), plus grgia and ZhenjaHorbach (reviewers). Related follow-up: [Liquid Glass Follow Up] Fix native tab bar issues when the Insights beta is on.

    I didn't test this, because iPadOS 27 can't be reproduced on web.


    Next Steps: Reply with @MelvinBot <your feedback> to refine this analysis.

  6. added and removed
    DeployBlockerCashThis issue or pull request should block deployment
    on Oct 20, 2026
  7. war-in commented on Oct 20, 2026

    @war-in
    Contributor

    I agree we should at least fix the labels and icon size but according to apple this is how the tabs should look on ipad
    https://developer.apple.com/design/human-interface-guidelines/tab-bars#iPadOS

    @expensify/design are we fine with that placement on iPad or do we want to move it? (I'm not sure if this is possible)

  8. shawnborton commented on Oct 20, 2026

    @shawnborton
    Contributor

    Wow, who knew. I think it's fine to go fully native here, whatever the platform decides is best with them. Can we get some video walkthroughs of how it works with the rest of the app pages though?

  9. war-in commented on Oct 20, 2026

    @war-in
    Contributor

    I don't have an iPad around but I'll try to build the dev version

  10. war-in commented on Oct 20, 2026

    @war-in
    Contributor

    Labels are definitely broken and maybe we could show them the same way we do on iOS in horizontal mode? I'm not sure if it's possible but we can try

    Image
    Screen.Recording.iPad.Pro.11-inch.M5.20-10-2026.at.12.29.09.mp4
  11. shawnborton commented on Oct 20, 2026

    @shawnborton
    Contributor

    Definitely down with that. Also, cc @chuckdries as this kinda relates to some of the changes you were working on with tablet sizes.

  12. melvin-bot commented on Oct 23, 2026

    @melvin-bot

    @ZhenjaHorbach Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

  13. melvin-bot commented on Oct 27, 2026

    @melvin-bot

    @ZhenjaHorbach Still overdue 6 days?! Let's take care of this!

  14. melvin-bot commented on Oct 29, 2026

    @melvin-bot

    @ZhenjaHorbach Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

BugSomething is broken. Auto assigns a BugZero manager.DailyKSv2EngineeringOverdue

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions