Add phone UI layer (responsive overhaul, PC untouched) - #27
Merged
Conversation
Progressive-enhancement mobile layer for phones (≤640px), added with zero change to the desktop experience. The PC UI is byte-identical by construction: all mobile CSS is scoped to @media (max-width: 640px) in a new mobile.css (loaded after style.css), and all mobile JS is gated behind isMobile(). - Navigation: header nav reflows to a fixed bottom tab bar (reusing #appNav), full-width quick-capture, page-scroll model with safe-area insets. - Tasks: 4-column board becomes full-width horizontal scroll-snap columns; SortableJS drag is skipped on touch; a per-card action sheet (openCardActionSheet) handles tap-based status/freeze/edit, reusing the existing mutation paths. - Notes/Mail/Spaces: master-detail — list is full-width, opening an item promotes the detail panel to a full-screen overlay with an injected Back button (initMobileMasterDetail). - Calendar: listWeek view + slimmed toolbar on phones (initCalendar branch). - Assistant: toolbar wraps, workspace drawer hidden, iframe fills the viewport. - Modals render as full-screen sheets. Verified with a Playwright pass: no horizontal overflow at 360–1440px on every destination, mobile flows (bottom nav, scroll-snap board, action sheet, master-detail overlays) working, and desktop screenshots at 1024/1440 unchanged. Core backend suite (154 tests) still green — no Python touched. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016djNVz9huD2ysEmLKydBFs
With ~10 spaces the chip row ate most of a phone screen. On phones only, each .space-chips container (kanban board, Notes, Assistant) now shows a companion <select> instead; the chips stay in the DOM, just hidden by the phone breakpoint. Deliberately KISS: single selection only. The Ctrl+click multi-space and Alt+click exclude conventions stay desktop-only, and picking a space from the dropdown clears any exclusions. A filter set up on desktop that the dropdown cannot express (several spaces, or exclusions) renders a disabled "Multiple spaces" entry rather than misreporting the active filter. One shared helper (syncMobileSpaceSelect in app.js) is called at the end of each of the three chip renderers with an onPick callback mirroring that view's existing plain-click branch, so no filter semantics are duplicated. Desktop is unchanged: the <select> is display:none outside the phone breakpoint. Verified by pixel-diffing the desktop at 1440/1024/800 across all five destinations with 10 spaces, against the original pre-mobile-layer code — 0 differing pixels — plus an interactive check that chip plain/Ctrl/Alt clicks still produce single/multi/excluded filters. Core backend suite still green (154 tests). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016djNVz9huD2ysEmLKydBFs
Records the reasoning behind the mobile work for future agents, in the existing topics/ style — the why and the decisions, not a restatement of the code. The most valuable part is the framing correction: "the app is unusable on phone, so we need a React/Vite frontend and a cleaner front/back split" was explored and rejected on evidence (the split already exists behind /api/*, which mcp_server/ already consumes as an independent client; Chainlit only backs the Assistant tab and is already responsive). Written so the rewrite does not get re-litigated from the same wrong premise, while keeping a separate mobile app as an explicit escape hatch. Also captures: why the PC invariant is enforced structurally rather than by care (and the two failure modes to watch), why drag is deliberately absent on touch, why the action sheet is plain DOM rather than a Bootstrap modal, why the space dropdown is single-select and must not misreport an unrepresentable filter, the 992px flex-wrap cascade trap, the pixel-diff regression net, and the headless-driving traps (blocked CDN assets, hash-only goto not reloading). CONTEXT.md gains the deep-dive ref, a "Phone layer" glossary entry, the static/css module-map line, and a stack-line mention — 4 lines, kept lean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016djNVz9huD2ysEmLKydBFs
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
2 participants
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.
Progressive-enhancement mobile layer for phones (≤640px), added with zero
change to the desktop experience. The PC UI is byte-identical by construction:
all mobile CSS is scoped to @media (max-width: 640px) in a new mobile.css
(loaded after style.css), and all mobile JS is gated behind isMobile().
full-width quick-capture, page-scroll model with safe-area insets.
SortableJS drag is skipped on touch; a per-card action sheet
(openCardActionSheet) handles tap-based status/freeze/edit, reusing the
existing mutation paths.
promotes the detail panel to a full-screen overlay with an injected Back
button (initMobileMasterDetail).
Verified with a Playwright pass: no horizontal overflow at 360–1440px on every
destination, mobile flows (bottom nav, scroll-snap board, action sheet,
master-detail overlays) working, and desktop screenshots at 1024/1440
unchanged. Core backend suite (154 tests) still green — no Python touched.
Co-Authored-By: Claude Opus 4.8 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_016djNVz9huD2ysEmLKydBFs