fix: unify top-bar button sizes on touch devices (iPad) (#286)

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.

Co-authored-by: Sahil Ahuja <sahilahuja@gmail.com>

Author: sahil-noon

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"

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