fix(mobile-ui): address review feedback + zoom fix on node open (AUT-54) - #26
Open
Camille1024 wants to merge 4 commits into
Open
fix(mobile-ui): address review feedback + zoom fix on node open (AUT-54)#26Camille1024 wants to merge 4 commits into
Camille1024 wants to merge 4 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.
- 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>
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>
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
3 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.
Summary
Follows up on #25 with fixes for all Copilot/Codex review comments, plus a runtime deployment bug and a mobile UX issue found during testing.
Review feedback addressed:
aria-hiddenbackdrop<div>with semantic<button>(Nodes + LogViewer)--header-heightCSS variable; replace all hard-codedtop: 40pxoffsetscalc(100dvh - 80px)in LogViewer withheight: 100%{!selectedId}to prevent z-index overlap with NodeDetailthead(screen reader fix)Deployment bug fix:
.dashboard/state.db(renamed in AUT-52) but file was still at.kip/state.db, causing the dashboard to show empty data. Added.dashboard/state.db → ../.kip/state.dbsymlink as transition aid.Mobile UX fix:
.drawertoposition: fixedon mobile — fixed elements are relative to the visual viewport and render at 1x regardless of page zoom.Test plan
🤖 Generated with Claude Code