fix(mobile): structural refactor — sheets, drill-in, and column peek - #64
Merged
Conversation
Two reports from a phone, one root cause each. The Kanban board was overflow-x-auto overflow-y-hidden. On desktop that is right — columns are full-height and scroll internally. On mobile a column is taller than the screen, so everything below the fold was unreachable: you could scroll sideways but not down. Below md the board now scrolls vertically and columns size to their content, with the inner per-column scroll kept for md+ so mobile does not get a nested scroll region that traps the gesture. The space chat was a flex sibling that split the screen. Competing with the tab content for height on a tall board, it was pushed past the bottom edge and simply never appeared when toggled. On mobile it is now a fixed bottom sheet at z-40, above the tab bar at z-30 — 'over content' is the point — with pb-mobile-nav so the composer clears the bar and gives the space back when the keyboard opens. Desktop keeps the resizable in-flow column unchanged.
Screenshot survey of all 12 workspace panels at 390x844 found the pattern three earlier spot-fix passes missed: desktop layouts rendering as-is on a phone. Two shapes, five panels: STACKED COMPANION CHATS (terminal/browser/desktop/files): every tool surface got ~45% of the screen with its chat stacked inline — the terminal showed three lines of shell above a half-screen empty chat. BrowserChatSidebar (the shared component all four use) is now the bottom SHEET on mobile — the exact pattern SpacePage already proved, svh/z-index/keyboard lessons carried over — and byte-for-byte the old resizable sidebar on desktop. Chat defaults CLOSED on a phone: opening covers 60% of the tool, so it is a deliberate tap, not the landing state. The workspace-level 35svh chat band for files/library (a third stacked zone) is hidden on mobile; desktop keeps the in-flow column. MASTER-DETAIL CRUSH (files/library): a fixed w-72 pane beside a flex-1 pane left the detail a text-wrapped sliver at 390px. Both are now drill-in on mobile — the list IS the screen until something is opened, then the detail takes over with a back affordance. Selection doubles as navigation state; no new state, desktop untouched. BOARD: columns are ~85vw with scroll-snap so the next column PEEKS at the edge instead of clipping cards mid-word with no affordance. e2e/mobile-survey.spec.ts is the permanent harness (per-panel screenshots + an overflow assertion; needs the local dev stack). Verified after: terminal owns the full viewport with the sheet opening over it (measured 390x506 box), files/library lists full-width with working back round-trip, board peek visible. tsc clean, 41/41 unit tests. Retracted from scope after a desktop control shot: observability/memory render nothing at ANY viewport in the dev env — not a mobile bug, filed separately.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two commits: yesterday's spaces fix (already live on the box as a built bundle — this PR brings its source to main, closing a drift where a main rebuild would have regressed the deployed UI) and today's structural mobile refactor.
The diagnosis (from a 12-panel screenshot survey at 390×844)
Desktop layouts were rendering as-is on a phone. Three earlier spot-fix passes (overflow, keyboard, one panel's chat) never touched the shapes:
35svhchat band under Files/Library.w-72pane besideflex-1left the detail a text-wrapped sliver.The fixes
BrowserChatSidebar(shared by all four panels) is now the bottom sheet on mobile — the SpacePage pattern with its svh/z-index/keyboard lessons carried over — and byte-for-byte the old resizable sidebar on desktop. Chat defaults closed on a phone.~85vw+ scroll-snap so the next column peeks.Evidence
Before/after screenshots for every change; drill-in interaction-tested (list → file → back); sheet measured (390×506 fixed box).
e2e/mobile-survey.spec.tsadded as the permanent harness — screenshots found what grep missed three times. tsc clean, 41/41 unit tests.Retracted from scope: observability/memory render nothing at ANY viewport in the dev env — a desktop control shot proved it's not a mobile bug. Filed separately.
Deployed: bundle
index-Cn1dnWPh.jsalready live and verified on the box.🤖 Generated with Claude Code
https://claude.ai/code/session_01Pm9fWeUM3FQ4EH6bgX8YdQ