Repository navigation
fix(mobile): show the session title beside the tabs on a landscape phone - #30879
Conversation
The served session page (react-native-web) reads flex: 0 as flex-basis 0%, so the title block collapsed to zero width beside the tab strip. flex: -1 is natural width capped at 160, shrinking only when the row overflows, on both web and native.
|
Important Review skippedReview was skipped as selected files did not have any reviewable changes. ⚙️ Run configuration
You can disable this status message by setting the Use the checkbox below for a quick retry:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info
📝 Walkthrough
Priority: ⬇️ Low Merge Risk: ⚪ Minimal · up to
|
| Check name | Status | Explanation |
|---|---|---|
| Title check |  |
The title clearly and concisely describes the main change: restoring the session title beside tabs on landscape phones. |
| Description check | |
The description is mostly complete and follows the required template. It explains the user impact, mechanism, rationale, linked issue context, visual proof, testing, scope, and compatibility considera… |
| Docstring Coverage | |
No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1… |
| Linked Issues check | |
Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | |
Check skipped because no linked issues were found for this pull request. |
Full details: Description check
-
Explanation
The description is mostly complete and follows the required template. It explains the user impact, mechanism, rationale, linked issue context, visual proof, testing, scope, and compatibility considerations. Minor checklist inconsistencies remain, but they do not prevent review.
Full details: Docstring Coverage
-
Explanation
No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files.
✨ Finishing Touches: 💡 1
-
📝 Generate docstrings
-
- Commit to this branch
- Create a new PR
🛠️ Fix failing CI checks: 💡
-
- Commit to this branch
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands.
|
On landscape phones with tabs, the session title disappeared because the web renderer treated Review complete on b686ffa — light path. One fresh adversarial reviewer confirmed all four light-path criteria, traced the header and tab layout, and completed the performance, compatibility and readiness checks. No production-code findings or fix round. Exact-version react-native-web compiler execution and Yoga source inspection confirm the intended sizing on web and native. The PR description was corrected to avoid claiming a new tap action; the served page title remains noninteractive. Validation: owner-run QA passed in the real served page inside the signed iOS shell on iPhone SE and iPhone 17 Pro: two tabs, short/long workspace names, portrait, landscape without tabs, and title-area taps. SE overflow scrolling passed; the Pro's two tabs fit, so overflow was not exercised there. Full PR workflow passed on this exact head, including static analysis, the mobile web bundle and For Brennan's review
Additional portrait, no-tab and tap comparisons are in the PR Visual Proof. The only changed sizing decision is the negative flex shorthand with the existing 160-point cap. Final sync: merged main into the branch twice. The first merge brought in #31169 (tab icon sizing, same styles file); the second brought in #31260, which fixed main's zod mismatch that had failed the e2e typecheck ratchet. Neither merge changed this PR's own diff, which is still the one-value |
…andscape-title-width
…andscape-title-width
ELI5
On a phone turned sideways, the session screen's top bar holds the workspace title on the left and the tab strip beside it. Right now the title is missing there: the tabs take the whole bar and you can't see which workspace you're in. This puts the title back.
What Changed
Mechanism: the title block's landscape style (
sessionTitleBlockBesideTabs) usedflex: 0plusflexShrink: 1. The session screen ships as a web page inside the phone app, and on the webflex: 0means a flex basis of 0%. A block with zero basis and no growth is zero wide.flex: -1is the one value that means "natural width, shrink when needed" on both the web renderer and native layout: react-native-web expands it to grow 0, shrink 1, basis auto.Why
This is a regression from the landscape top-bar change (#29070) and the follow-up that sized tabs to their titles (#29222). They were checked against native layout, where
flex: 0behaves differently. Listing grow, shrink and basis separately doesn't work here, because the base title style'sflex: 1would still decide the layout on native.flex: -1replaces that shorthand with one that means the same thing on both renderers.Linked Issue
Found in QA for #30389 (tracked there); no separate issue.
Visual Proof
b686ffa
PASS — real served mobile page inside the signed iOS app shell, checked October 20, 2026 with Codex CLI on iPhone SE (3rd generation) and iPhone 17 Pro, iOS 26.5. Same two worktree sessions and two terminal tabs on main and the PR:
qaand a 60-character workspace name. Main reproduces the missing landscape title; the PR restores the name and status line.ef950401d3be7fdd44c44ebbeb4f196fdcbda165b686ffa83aad98dbd950b02063d8b6a16290e4c8PASS on both phones: the short title block is about 51 pt wide; the long title block is 160 pt with an ellipsis (measurements from screenshot dividers and device scale). The connection dot and tab count are readable; tabs use the remaining space; Files, Source Control, and More stay on screen. The SE overflow strip moves about 50 pt after a horizontal swipe. The Pro’s two capped tabs fit, so overflow scrolling there was not tested; the swipe caused no regression.
Main has no visible title target; its collapsed title position was tapped. On the PR the visible title text was tapped. Both sessions remained unchanged.
Build-id footers distinguish the served builds: main
a5cb235c7062(full IDa5cb235c706255973de451241ebdf00c40a1416fe93e3a861d962ef861688019), PR5448facea553(full ID5448facea55334023e89cb57130cdffd2041bf75f5df75d845f483affe29dbc8). The hidden desktop was built at main and restarted after the PR mobile-web rebuild to clear its cached manifest; both phones then displayed the PR footer. Landscape proof images are orientation-only copies of original simulator screenshots.Testing
The change is one style value whose effect is in the rendered layout, which unit tests with mocked React Native can't see. It's verified by real landscape QA of the served page inside the phone app (screenshots above).
Review
Review path
Light path, per criterion:
mobile/src/session/mobile-session-frame-styles.ts).Plan: change the shorthand to
flex: -1, then check it in real landscape QA of the served page inside the phone app (two phone sizes, short and long titles, two tabs), main against the branch.Agent skill upstream boundary
Notes
Mobile only. Portrait and tablet layouts don't use this style. No desktop, SSH or wire impact.
Checklist
N/Awith reasonpnpm lint,pnpm typecheck,pnpm test, andpnpm buildpass (or CI will cover; local preferred)