fix(web): session-card button overflow + bottom-nav icon alignment
apple / swift (push) Successful in 55s
android / android (push) Successful in 3m59s
ci / web (push) Successful in 36s
ci / rust (push) Successful in 4m29s
ci / docs-site (push) Successful in 51s
deb / build-publish (push) Successful in 2m18s
decky / build-publish (push) Successful in 12s
docker / build-push (--build-arg FEDORA_VERSION=44, ci, ci/fedora-rpm.Dockerfile, punktfunk-fedora44-rpm) (push) Successful in 5s
docker / build-push (., web/Dockerfile, punktfunk-web) (push) Successful in 19s
docker / build-push (ci, ci/fedora-rpm.Dockerfile, punktfunk-fedora-rpm) (push) Successful in 4s
docker / build-push (ci, ci/rust-ci.Dockerfile, punktfunk-rust-ci) (push) Successful in 3s
docker / build-push (docs-site, docs-site/Dockerfile, punktfunk-docs) (push) Successful in 3s
ci / bench (push) Successful in 4m52s
rpm / build-publish (bazzite, punktfunk-fedora-rpm) (push) Successful in 8m21s
docker / deploy-docs (push) Successful in 6s
rpm / build-publish (fedora-44, punktfunk-fedora44-rpm) (push) Successful in 8m6s

- 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 b6b0b6c29e
commit b3811ff72e
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)]' }} activeProps={{ className: 'text-[var(--brand-light)]' }}
> >
<Icon className="size-5 shrink-0" /> <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> </Link>
))} ))}
</nav> </nav>
+2 -2
View File
@@ -60,12 +60,12 @@ function Dashboard() {
</div> </div>
<Card> <Card>
<CardHeader className="flex-row items-center justify-between space-y-0"> <CardHeader className="flex flex-col items-start gap-3 space-y-0 sm:flex-row sm:items-center sm:justify-between">
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<MonitorPlay className="size-4" /> <MonitorPlay className="size-4" />
{m.status_session()} {m.status_session()}
</CardTitle> </CardTitle>
<div className="flex gap-2"> <div className="flex flex-wrap gap-2">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"