feat(mobile): usable Table/Kanban/Gantt/Calendar/Activity on phones + mobile-views test - #80
Merged
Conversation
…Table/Kanban/Gantt/Activity) + Calendar agenda-default Adds tests/e2e/mobile-views.spec.ts (@mobile, 390px): each non-graph view must be explorable by scrolling DOWN, never sideways. Currently RED for Table, Kanban, Gantt, Activity (horizontally-scrollable content) and Calendar (cramped month grid instead of an agenda list). data-testid=view-content added to anchor the probe. Fixes follow. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The non-graph views forced horizontal scrolling on a phone (wide table, a row of board columns, a timeline) or rendered a cramped grid — you couldn't explore them by scrolling down. Each now has a phone layout; desktop (≥ sm) is unchanged. - TableView: phones get a stacked card per work item with labeled fields (title, type, status, priority, contributor, connections, due date, tags); the wide table is `hidden sm:block`. - KanbanView: columns stack vertically and scroll down on phones (`flex-col`, no overflow-x); the horizontal board returns at sm:. - GanttChart: phones get a readable schedule list (task + status + progress + start–end dates); the interactive timeline is `hidden sm:block`. - CalendarView: defaults to the Agenda list on phones (matchMedia) instead of the unreadable 7-column month grid; Month/Week still selectable. - ActivityFeed: rows wrap on phones (min-w-0 + flex-wrap, p-3) so the timestamp pill no longer pushes content past the viewport. Driven by tests/e2e/mobile-views.spec.ts (committed first, was RED): each view must be explorable by scrolling DOWN, never sideways. Now 8/8 green; mobile- experience 2/2; smoke gate 5/5; web typecheck clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🧪 Comprehensive Test Suite
Full-stack smoke gate runs in the CI workflow. |
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.
Why
On phones the non-graph views weren't explorable: Table (1250px wide → sideways scroll), Kanban (3000px of columns), Gantt (800px timeline), Calendar (cramped 7-col month grid), Activity (row overflow). You could only scroll sideways to reach content.
Test first (reproduces the errors)
tests/e2e/mobile-views.spec.ts(@mobile, 390px) — committed RED first: each view must be explorable by scrolling down, never sideways (nooverflow-xscroll container with clipped width inside the view), and Calendar must default to Agenda on phones.Fixes (desktop ≥ sm unchanged)
hidden sm:block.hidden sm:block.min-w-0/flex-wrap,p-3) so the timestamp no longer overflows.Verification
mobile-views 8/8, mobile-experience 2/2, smoke gate 5/5, web typecheck clean. Visually confirmed each view at 390px.