feat(dashboard): mobile-responsive UI for review on phones (AUT-54) - #25
Open
surenny wants to merge 6 commits into
Open
feat(dashboard): mobile-responsive UI for review on phones (AUT-54)#25surenny wants to merge 6 commits into
surenny wants to merge 6 commits into
Conversation
Reviewers commonly work from phones, but the dashboard was desktop-first (fixed 220px sidebar, 420px detail drawer, no @media queries, sub-30px touch targets). Below 768px the layout was unusable. All changes are scoped behind `@media (max-width: 768px)` plus a couple of toggle buttons that default to `display: none`, so the desktop layout is unchanged. - Nodes: filter sidebar collapses into a slide-in drawer behind a ☰ Filters button; node detail drawer becomes a fullscreen sheet with a sticky id/close header. - LogViewer: log-list sidebar gets the same slide-in treatment; toolbar packs tighter; selecting a log auto-closes the drawer. - Overview: stats grid drops to 2-up; stale-backlog table converts to card list via data-label attributes. - NodeDetail: review form inputs go to 16px font (suppresses iOS Safari auto-zoom on focus); submit button becomes full-width 44px-tall; flagsGrid drops to 2 columns. - Globals: header wraps gracefully; project-badge hides ≤480px; body font-size bumped to 14px on mobile for legibility. svg-pan-zoom 3.6 already supports touch pan/pinch-zoom out of the box — no JS changes needed for the graph itself, just the chrome around it.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 10ad0caea7
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
+277
to
+280
| <button | ||
| type="button" | ||
| className={styles.mobileFilterToggle} | ||
| onClick={() => setMobileSidebarOpen(v => !v)} |
There was a problem hiding this comment.
When a node is selected on mobile (≤768px), the detail drawer becomes fullscreen, but this filter button is still rendered and its CSS places it above the drawer (z-index: 12 vs the drawer's z-index: 10). In that state it overlays the NodeDetail header/id and can reopen the filter sidebar on top of the review sheet, so it should be hidden or gated while selectedId is set.
Useful? React with 👍 / 👎.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR makes the dashboard UI (Nodes / Overview / Logs) usable on phones by adding mobile-scoped responsive styles and off-canvas sidebars while aiming to keep the desktop layout unchanged.
Changes:
- Adds mobile off-canvas drawers + toggles for the Nodes filter sidebar and LogViewer log list.
- Converts Overview’s “stale backlog” table into a mobile card layout via
data-label+ CSS. - Improves mobile readability/tap targets via global and component-level
@media (max-width: 768px)styling (incl. sticky NodeDetail header and larger review inputs).
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/client/src/views/Overview.tsx | Adds data-label attributes to support mobile card rendering of the stale table. |
| ui/client/src/views/Overview.module.css | Implements mobile stats grid tweaks and table→cards CSS. |
| ui/client/src/views/Nodes.tsx | Adds mobile sidebar open/close state, toggle button, and backdrop. |
| ui/client/src/views/Nodes.module.css | Implements off-canvas filter drawer, backdrop, and mobile sizing/tap-target tweaks. |
| ui/client/src/views/LogViewer.tsx | Adds mobile sidebar open/close state, toggle button, and backdrop; auto-closes on selection. |
| ui/client/src/views/LogViewer.module.css | Implements off-canvas log list drawer, toolbar compaction, and mobile viewport sizing. |
| ui/client/src/styles/global.css | Adds mobile header/main padding adjustments and hides project badge under 480px. |
| ui/client/src/components/NodeDetail.module.css | Adds mobile sticky header, larger inputs/buttons, and smaller content max-heights. |
| ui/client/src/components/LogEntryLine.module.css | Tightens log line spacing/font sizes on mobile. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+287
to
+290
| <div | ||
| className={styles.mobileBackdrop} | ||
| onClick={() => setMobileSidebarOpen(false)} | ||
| aria-hidden="true" |
Comment on lines
+195
to
+199
| header (~40px tall) — adjust if header height changes. */ | ||
| .sidebar { | ||
| position: fixed; | ||
| top: 40px; | ||
| left: 0; |
Comment on lines
+167
to
+170
| <div | ||
| className={styles.mobileBackdrop} | ||
| onClick={() => setMobileSidebarOpen(false)} | ||
| aria-hidden="true" |
|
|
||
| @media (max-width: 768px) { | ||
| .root { | ||
| height: calc(100dvh - 80px); /* dvh accounts for iOS Safari URL bar */ |
Comment on lines
+133
to
+137
| .sidebar { | ||
| position: fixed; | ||
| top: 40px; | ||
| left: 0; | ||
| bottom: 0; |
Comment on lines
+50
to
+54
| /* Convert the stale table into a card list. Header row hidden; each <tr> | ||
| becomes a bordered card; each <td> becomes a label/value row whose | ||
| label comes from data-label set in Overview.tsx. */ | ||
| .table { display: block; font-size: 13px; } | ||
| .table thead { display: none; } |
- Add --header-height CSS variable; replace all hard-coded top:40px offsets - Use height:100% in LogViewer root instead of brittle calc(100dvh - 80px) - Replace aria-hidden div backdrops with semantic <button> elements - Gate Nodes filter toggle when NodeDetail drawer is open (z-index overlap) - Use visually-hidden technique for Overview mobile thead (screen reader fix) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace position:absolute with position:fixed for the NodeDetail drawer on mobile. Fixed elements are positioned relative to the visual viewport, so they render at 1x scale regardless of any pinch-zoom the user applied to the graph canvas before tapping a node. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
5 tasks
When the user pinch-zooms the page on mobile and then taps a node, the NodeDetail drawer now uses the visualViewport API to apply an inverse scale transform — rendering at 1x regardless of the current browser zoom level. Listens to visualViewport resize/scroll events to stay in sync if the user zooms while the drawer is open. Reverts the touch-action:none approach (which broke pinch-zoom entirely) in favor of letting native zoom work while compensating in the drawer. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…ish (AUT-54) Blueprint: add mobile.css/mobile.js for TOC drawer, MathJax overflow, dep-graph pinch-zoom, enlarged touch targets, and bottom-nav adaptation. Dashboard: bump maxZoom to 50, enlarge close/link/chip touch targets, disable iOS autocorrect on inputs, add iPhone safe-area support, move inline styles to CSS classes for Overview phase bar and NodeDetail close button. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…n (AUT-54) On mobile, each tap fires touchstart followed by a synthesized mousedown within <250ms at the same position. svg-pan-zoom misdetects this pair as a double-click and zooms in on every single tap. Disable dblClickZoomEnabled to fix; users can still zoom via the +/−/fit buttons. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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
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.
Summary
Linear: AUT-54
Dashboard was desktop-first; below 768px viewport the layout was unusable for reviewers on phones. This change makes all three views (Nodes / Overview / Logs) responsive with the graph kept but collapsible behind a hamburger.
All mobile-specific styling is scoped inside
@media (max-width: 768px)and a few toggle buttons that default todisplay: none, so the desktop layout is untouched.Per-view changes
data-labelattributes (table → cards is pure CSS; only the.tsxchange is adding the labels).What did NOT change
Test plan