Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sahil-noon merged 1 commit into from
Jun 17, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions app/frontend/src/components/top-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" ? (
Expand Down Expand Up @@ -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 ? (
Expand Down Expand Up @@ -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 ? (
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion fab/project/context.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading