fix(mobile): work-item edit modal is a usable full-screen sheet on phones - #85
Merged
Conversation
… on phones Tapping a card in list view opened WorkItemDetailsModal, which on a phone was a cramped centered card with a fixed two-column body — and (because it rendered inside the z-20 main-wrapper while the bottom nav/top bar are z-30) the nav and project selector painted ON TOP of it. It didn't fit and looked broken. - Portal the modal to document.body so it escapes the page stacking context and actually covers everything (matches the other dialogs here). - Phones: full-screen sheet (w/h-full, no rounding) with a sticky header so Save/Close stay reachable while scrolling. Desktop unchanged: centered max-w-3xl card. - The two-column body (content | actions) now stacks on phones (flex-col md:flex-row); the right Actions column is w-full md:w-36. Desktop centered-card layout verified unchanged. Smoke 5/5; mobile specs 10/10; 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.
Tapping a list card opens
WorkItemDetailsModal. On phones it was a cramped centered card with a fixed two-column body, and the bottom nav + project selector painted on top of it (it rendered inside thez-20main-wrapper while the nav/top-bar arez-30). It didn't fit and looked broken.document.bodyso the modal escapes the page stacking context and covers everything (the pattern the other dialogs use).max-w-3xlcard).flex-col md:flex-row); the Actions column isw-full md:w-36.Verified phone (full-screen, single column, header at top, nav no longer bleeds through) + desktop (unchanged 2-col card). Smoke 5/5; mobile 10/10; typecheck clean.