fix(web): session-card button overflow + bottom-nav icon alignment

- Dashboard session card: the header stacks the title above the action buttons
  on narrow screens (flex-col -> sm:flex-row) and the button group wraps
  (flex-wrap), so "Request IDR" / "Stop session" no longer overflow the card.
- Mobile bottom nav: give each label a fixed two-line-tall centered box so a
  1- or 2-line label (labels vary by locale) keeps every tab icon at the same
  height.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-21 12:33:33 +00:00
parent e390718d13
commit 7bc5deee7d
2 changed files with 7 additions and 3 deletions
+5 -1
View File
@@ -80,7 +80,11 @@ export function AppShell({ children }: { children: ReactNode }) {
activeProps={{ className: 'text-[var(--brand-light)]' }}
>
<Icon className="size-5 shrink-0" />
<span className="w-full text-center text-[10px] leading-tight">{label()}</span>
{/* Fixed two-line-tall box so a 1- or 2-line label keeps every icon
at the same height (the labels vary by locale). */}
<span className="flex h-7 w-full items-center justify-center text-center text-[10px] leading-tight">
{label()}
</span>
</Link>
))}
</nav>