Make every screen mobile-responsive (<768px)#67
Open
xBalbinus wants to merge 1 commit into
Open
Conversation
Sweep of all routes at 375px with surgical, additive Tailwind fixes: - Shared primitives: dialog/alert-dialog/model-selector get a viewport gutter (w-[calc(100%-2rem)]) + dvh max-height; toast viewport uses dvh and its close button is tappable on touch. - Tables wrapped in overflow-x-auto + min-w so they scroll instead of clipping (sessions, executions, admin users/invites/repos/plugins, settings identity/notifications, persona tools, action policies). - Filter-pill rows wrap instead of clipping (sessions, executions, triggers). - Split-pane views stack on mobile (workflow-detail Runs, review-drawer); the in-chat orchestrator thread sidebar is desktop-only. - Grids collapse to one column with min-w-0 (dashboard recent-sessions/ top-repos, usage by-user/by-model, admin/github-config forms). - Banners/form rows stack; markdown tables and code blocks scroll within the chat column. - Touch targets bumped and hover-only affordances (Copy, step Edit, toast dismiss) revealed on touch. - Fix sr-only action labels escaping the session-table scroll wrapper (made the wrapper relative) which silently scrolled the document. All routes verified at 375px with zero horizontal overflow; client build (tsc --noEmit + vite) passes.
|
Preview deployment: https://pr-67.dev-valet-turnkey-client.pages.dev |
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.
What
Full mobile pass over the Valet client: rendered every route at 375px, cataloged glitches, fixed them, and looped until each screen had zero horizontal overflow and looked right. 34 client files, surgical additive Tailwind only (no logic changes).
Highlights
w-[calc(100%-2rem)]) +dvhmax-height; toast viewport usesdvhand its close button is tappable on touch.overflow-x-auto+min-wso they scroll instead of clipping (sessions, executions, admin users/invites/repos/plugins, settings identity/notifications, persona tools, action policies).min-w-0(dashboard, usage By-User/By-Model, admin & github-config forms).sr-onlyaction labels were escaping the session-table scroll wrapper (it wasstatic) and silently scrolling the whole document — made the wrapperrelative.Verification
tsc --noEmit+vite build) passes.Notes