fix(dashboard): mobile touch and layout polish - #704
Merged
Conversation
Email channel dialog: the focus ring on the leftmost field was clipped — overflow-y-auto forces overflow-x to compute as auto too, and the nested scroll wrapper (used here so the footer stays outside the scroll area, unlike every other dialog) had no padding of its own to give the ring room before hitting that edge. Added a small negative-margin/padding pair so the ring renders without shifting any content. Settings mobile menu button used variant="outline", inconsistent with the borderless cog icon it sits next to; switched to "ghost". The cog icon and the settings-page back arrow were gray-by-default with hover turning them black — right for a mouse, permanently gray on a touch device that has no hover state. Both now force black via [@media(hover:none)], leaving desktop behavior untouched. Team page: members and pending-invitations tables forced horizontal scroll below md (min-w-[640px] on a plain table). Both now collapse to a stacked card list on mobile instead. Members keep the role select inline with edit/remove — it's the only place to change a member's role, the edit dialog only renames — dropping just the join date. Invitations show email then role chip + revoke in one row, matching the same alignment. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011HwhYb3yU3qnGjtFRodQxm
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.
Independent of the outbound-calling stack — small, unrelated UI fixes found while eyeballing the SMS/email channel dialogs on mobile.
Email channel dialog — clipped focus ring
This dialog is the only one that nests its scroll container one level inside
DialogContent(so the footer can stay pinned below the scrolling form, unlike every other dialog where the footer scrolls with the content). That inneroverflow-y-autodiv has no padding of its own — per the CSS overflow spec, settingoverflow-yto anything butvisibleforcesoverflow-xto compute asautotoo, so the box-shadow focus ring on the leftmost input hit that clip edge immediately. Fixed with the standard-mx-1/px-1buffer pair: expand the box 4px, pad back in 4px, net-zero visual shift, but now the ring has room. Confirmed this predates the current PR stack — it's onmainalready, not something introduced there.Touch devices stuck gray
The cog icon (dashboard topbar) and the back arrow (settings topbar) are
text-ink-muteat rest, turning black on:hover. Correct for a mouse; permanently gray on a touchscreen, which has no persistent hover state to reveal the "real" color. Both now force black via[@media(hover:none)]:!text-ink(and the dark-mode pair) —!importantis deliberate here, since a same-specificity override would leave the outcome dependent on Tailwind's internal class-emission order rather than the media condition. Thehover:behavior for actual mouse users is untouched.The mobile hamburger menu button was also
variant="outline"(bordered), inconsistent with the borderless cog it sits next to on desktop. Switched tovariant="ghost".Team page tables on mobile
Members and pending-invitations tables used
min-w-[640px]on a plain<table>, forcing horizontal scroll on any phone-width viewport. Belowmdthey now render as a stacked card list instead;mdand up is pixel-identical to before.Verification
pnpm typecheckclean,pnpm -F @getmunin/dashboard-pages testgreen (39 tests, no team-page tests exist), eslint clean on all three touched files. Verified interactively against a local dev server at mobile viewport widths, including seeding extra dummy members/invitations to check the card layout with a realistic row count.🤖 Generated with Claude Code
https://claude.ai/code/session_011HwhYb3yU3qnGjtFRodQxm