From 02082085c423499ca48105d03c61cbefc0981ae7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kjell=20Rune=20Mons=C3=B8?= Date: Thu, 30 Jul 2026 12:24:44 +0200 Subject: [PATCH] fix(dashboard): mobile touch and layout polish MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) Claude-Session: https://claude.ai/code/session_011HwhYb3yU3qnGjtFRodQxm --- .changeset/dashboard-mobile-polish.md | 10 +++ .../src/components/munin-topbar.tsx | 6 +- .../dashboard-pages/src/pages/channels.tsx | 2 +- packages/dashboard-pages/src/pages/team.tsx | 66 +++++++++++++++++-- 4 files changed, 76 insertions(+), 8 deletions(-) create mode 100644 .changeset/dashboard-mobile-polish.md diff --git a/.changeset/dashboard-mobile-polish.md b/.changeset/dashboard-mobile-polish.md new file mode 100644 index 00000000..8d9f3991 --- /dev/null +++ b/.changeset/dashboard-mobile-polish.md @@ -0,0 +1,10 @@ +--- +'@getmunin/dashboard-pages': patch +--- + +Fix several mobile/touch dashboard UI issues + +- Email channel dialog: the focused-input ring on the leftmost field was clipped, because `overflow-y-auto` forces `overflow-x` to compute as `auto` too, and the scrolling wrapper had no padding of its own to give the ring room. Added a small inset/outset pair so the ring renders without shifting any content. +- Settings topbar: the mobile menu button had a border (`variant="outline"`) inconsistent with the borderless cog icon elsewhere; switched to `variant="ghost"`. +- Settings topbar back arrow and dashboard topbar cog icon were styled gray-by-default with hover turning them black — correct for a mouse, but permanently gray on a touch device with no hover state. Both now force black via `[@media(hover:none)]`, leaving the hover-capable (desktop) behavior unchanged. +- Team page: the members and pending-invitations tables used a fixed `min-w-[640px]` with horizontal scroll on narrow viewports. Below `md`, both now render as a stacked card list instead — members show name/email, then role select + edit/remove actions in one row (role stays visible since it's the only place to change it, unlike the edit dialog which only renames); invitations show email, then role chip + revoke in one row, matching the same alignment pattern. diff --git a/packages/dashboard-pages/src/components/munin-topbar.tsx b/packages/dashboard-pages/src/components/munin-topbar.tsx index 95d955d5..461af0cf 100644 --- a/packages/dashboard-pages/src/components/munin-topbar.tsx +++ b/packages/dashboard-pages/src/components/munin-topbar.tsx @@ -57,7 +57,7 @@ export function DashboardTopbar({ href={settingsHref} aria-label={settingsLabel} title={settingsLabel} - className="group inline-flex size-9 items-center justify-center text-ink-mute transition-colors duration-fast hover:text-ink dark:hover:text-foreground" + className="group inline-flex size-9 items-center justify-center text-ink-mute transition-colors duration-fast hover:text-ink dark:hover:text-foreground [@media(hover:none)]:!text-ink dark:[@media(hover:none)]:!text-foreground" > {onMenuToggle ? ( + )} + + + + + ))} + + )} @@ -276,8 +312,9 @@ export function TeamPage() { ) : invites.length === 0 ? ( ) : ( -
- + <> +
+
@@ -312,6 +349,27 @@ export function TeamPage() {
{t('invitesTable.email')}
+
    + {invites.map((inv) => ( +
  • +
    +

    + {inv.email} +

    +
    +
    + + +
    +
    • + ))} +
+ )}