From 791a529078dddebf9ef6e401c39289b4dae226ef Mon Sep 17 00:00:00 2001 From: Sahil Ahuja Date: Wed, 17 Jun 2026 22:21:10 +0530 Subject: [PATCH] fix: unify top-bar button sizes on touch devices (iPad) The Aa (terminal-font) and bell (notifications) buttons carried a coarse:36px touch-target bump while the splits, close, theme, and fixed-width buttons stayed at 24px, so on coarse-pointer devices (iPad) the cluster rendered at two different sizes. Apply a uniform coarse:30px square to all six right-side top-bar controls (24px on fine pointers, unchanged on desktop) and document the convention in context.md. --- app/frontend/src/components/top-bar.tsx | 12 ++++++------ fab/project/context.md | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/frontend/src/components/top-bar.tsx b/app/frontend/src/components/top-bar.tsx index ebf41b0d..9cafa556 100644 --- a/app/frontend/src/components/top-bar.tsx +++ b/app/frontend/src/components/top-bar.tsx @@ -396,7 +396,7 @@ function ThemeToggle() { type="button" onClick={handleClick} aria-label={label} - className="min-w-[24px] min-h-[24px] rounded border border-border text-text-secondary hover:border-text-secondary transition-colors flex items-center justify-center" + className="min-w-[24px] min-h-[24px] coarse:min-w-[30px] coarse:min-h-[30px] rounded border border-border text-text-secondary hover:border-text-secondary transition-colors flex items-center justify-center" title={label} > {mode === "system" ? ( @@ -456,7 +456,7 @@ function SplitButton({ onClick={() => execute()} disabled={isPending} aria-label={label} - className="min-w-[24px] min-h-[24px] rounded border border-border text-text-secondary hover:border-text-secondary transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed" + className="min-w-[24px] min-h-[24px] coarse:min-w-[30px] coarse:min-h-[30px] rounded border border-border text-text-secondary hover:border-text-secondary transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed" title={label} > {isPending ? ( @@ -516,7 +516,7 @@ function ClosePaneButton({ onClick={() => execute()} disabled={isPending} aria-label="Close pane" - className="min-w-[24px] min-h-[24px] rounded border border-border text-text-secondary hover:border-text-secondary transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed" + className="min-w-[24px] min-h-[24px] coarse:min-w-[30px] coarse:min-h-[30px] rounded border border-border text-text-secondary hover:border-text-secondary transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed" title="Close pane" > {isPending ? ( @@ -609,7 +609,7 @@ function TerminalFontControl() { aria-expanded={open} aria-label="Terminal font size" title="Terminal font size" - className={`min-w-[24px] min-h-[24px] coarse:min-w-[36px] coarse:min-h-[36px] rounded border transition-colors flex items-center justify-center text-xs font-semibold leading-none ${ + className={`min-w-[24px] min-h-[24px] coarse:min-w-[30px] coarse:min-h-[30px] rounded border transition-colors flex items-center justify-center text-xs font-semibold leading-none ${ open ? "border-accent text-accent bg-accent/10" : "border-border text-text-secondary hover:border-text-secondary" @@ -753,7 +753,7 @@ function NotificationControl() { aria-expanded={open} aria-label={ariaLabel} title={statusLabel} - className={`min-w-[24px] min-h-[24px] coarse:min-w-[36px] coarse:min-h-[36px] rounded border transition-colors flex items-center justify-center leading-none ${ + className={`min-w-[24px] min-h-[24px] coarse:min-w-[30px] coarse:min-h-[30px] rounded border transition-colors flex items-center justify-center leading-none ${ open ? "border-accent text-accent bg-accent/10" : subscribed @@ -831,7 +831,7 @@ function FixedWidthToggle() { onClick={toggleFixedWidth} aria-label="Toggle fixed terminal width" aria-pressed={fixedWidth} - className={`min-w-[24px] min-h-[24px] rounded border transition-colors flex items-center justify-center ${ + className={`min-w-[24px] min-h-[24px] coarse:min-w-[30px] coarse:min-h-[30px] rounded border transition-colors flex items-center justify-center ${ fixedWidth ? "border-accent text-accent bg-accent/10" : "border-border text-text-secondary hover:border-text-secondary" diff --git a/fab/project/context.md b/fab/project/context.md index d57507c2..1e3c8f4a 100644 --- a/fab/project/context.md +++ b/fab/project/context.md @@ -87,7 +87,7 @@ Never run `npx playwright test` directly — always use `just test-e2e` or `just ## Mobile Responsive Design - Touch targets use the `coarse:` custom Tailwind variant (`@media (pointer: coarse)`) for touch devices -- Touch targets: `coarse:min-h-[36px] coarse:min-w-[28px]` (taller than wide, not square) for bottom bar buttons; `coarse:36px` square for top bar/breadcrumb buttons +- Touch targets: `coarse:min-h-[36px] coarse:min-w-[28px]` (taller than wide, not square) for bottom bar buttons; `coarse:30px` square for top-bar button controls (24px on fine pointers), applied uniformly across the whole right-side cluster — splits, close, Aa, bell, theme, fixed-width — so they don't diverge in size on touch devices - Bottom bar toolbar fits all buttons in a single row at 375px — no wrapping, no horizontal scroll - Top bar is a single line: breadcrumbs + connection status + FixedWidthToggle + command palette trigger. Session/window creation actions live in breadcrumb dropdown `+ New` items - Mobile sidebar drawer is `absolute` inside the main area (not `fixed inset-0`) so the top bar stays visible and the logo toggle can close the drawer