Repository navigation
[Liquid Glass Follow Up][Design] iOS - Bottom tab - Bottom tab buttons have uneven side margins in landscape mode #104296
Description
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.13-1
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: #101339
Email or phone of affected tester (no customers): n/a
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPhone 13 iO S26.6
App Component: Other
Action Performed:
- Open the app
- Rotate the device to landscape mode
- Navigate through the bottom navigation bar by tapping different tabs
Expected Result:
The bottom tab buttons should be evenly spaced, with equal margins on both sides when focused in landscape mode
Actual Result:
Bottom tab buttons have uneven side margins when focused in landscape mode
Workaround:
Unknown
Platforms:
- Android: App
- Android: mWeb Chrome
- iOS: App
- iOS: mWeb Safari
- iOS: mWeb Chrome
- Windows: Chrome
- MacOS: Chrome Safari
Screenshots/Videos
Bug7288361_1792174704369.ScreenRecording_10-16-2026_13-08-57_1.mp4
Applause Internal Information
Exported by: Svetlana Lazutkina
Bug ID: 7288361
Metadata
Metadata
Type
Projects
- Status
Activity
applause-bot commentedon Oct 17, 2026
While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/de9b51b97705c846cf74d45021c6339065e9542cd567146ee33628358a5ce861
melvin-bot commentedon Oct 17, 2026
@grgia recently merged #101339, but they are OOO right now, so I'll auto-assign someone else.
melvin-bot commentedon Oct 17, 2026
Triggered auto assignment to @tylerkaraszewski (
DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.github-actions commentedon Oct 17, 2026
👋 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:
melvin-bot commentedon Oct 17, 2026
@grgia @ZhenjaHorbach you have been assigned to this deploy blocker because you reviewed the offending PR: #101339
melvin-bot commentedon Oct 17, 2026
@sumo-slonik you have been assigned to this deploy blocker because you authored the offending PR: #101339
melvin-bot commentedon Oct 17, 2026
💬 A slack conversation has been started in #expensify-open-source
ZhenjaHorbach commentedon Oct 17, 2026
It shouldn't have the whole width
At least design team didn't have questions about it
MelvinBot commentedon Oct 17, 2026
Deploy Blocker Analysis
Causing PR: Add liquid glass bottom tab bar to iOS, Android and mWeb (high confidence). It replaced the JS tab bar with a native iOS
UITabBarControllerand added every file involved.Recommendation: Demote. The bug is cosmetic, iPhone landscape only, and doesn't affect core flows. If you keep it as a blocker, fix forward rather than revert this large native PR. Landscape layout issues were already raised in PR review and planned as a follow-up.
Root cause (medium confidence; not verified on a device): In landscape, the app draws each tab's label into the icon image and sets the native title to an empty string (index.ios.ts:55). UIKit likely still reserves image-to-title spacing on the right, so the focused pill has more padding on the right than on the left.
Recommended fix (pick one):
tabBarLabeland use a glyph-only image so UIKit pads the item itself. Design must accept that iOS 26 ignores inactive title colors.inlinebranch ofgetTabIconFrame(tabIconRasterizer.ts:154-163). This depends on UIKit's internal spacing, so it is more fragile.Investigation details
inlineicon layout (index.ios.ts:29-34, :46). The image becomes[glyph][gap][label], sizedboxSize + labelGap + labelWidth.''through, and react-native-screens setstabBarItem.title = @""(empty string, not nil). UIKit therefore probably still lays out a title slot beside the image in compact landscape.labelMaxWidthonly affects label truncation (index.ios.ts:44-51).Next Steps: Reply with
@MelvinBot implement thisto create a draft PR, or@MelvinBot <your feedback>to refine this analysis.view run
grgia commentedon Oct 19, 2026
Demoting as blocker, let's get design confirmation here
shawnborton commentedon Oct 19, 2026
Hmm yeah, might be nice to make sure we use the same gap on the right side of the label since these tabs are essentially hugging and aren't fixed width sizes.
shawnborton commentedon Oct 19, 2026
Def not a blocker though.
[-]iOS - Bottom tab - Bottom tab buttons have uneven side margins in landscape mode[/-][+][Design Fix] iOS - Bottom tab - Bottom tab buttons have uneven side margins in landscape mode[/+][-][Design Fix] iOS - Bottom tab - Bottom tab buttons have uneven side margins in landscape mode[/-][+][Liquid Glass Follow Up][Design] iOS - Bottom tab - Bottom tab buttons have uneven side margins in landscape mode[/+]