Responsive

Read across a row to see one part of a screen at every width.

• On phones, anything tapped often is at least 44px tall: list rows, tabs, menu rows, fields and main buttons. The package's components already are.
• Everywhere, nothing is smaller to hit than 28px. A control can draw smaller (a 16px checkbox) and reach 28px with an invisible tap area around it, as Checkbox does.
• Never hide an action until the pointer hovers. Phones can't hover, so the action would never appear. Show it, or show it on hover only where hovering exists ([@media(hover:hover)]:opacity-0 group-hover:opacity-100).
• Tips and hover cards don't open on touch. Anything people need is in the visible label or on the page; a hover card's name is a link to the full page.

Below 768px, a filter, a picker or any list people scroll or search slides up from the bottom, near the thumb, instead of opening a small menu by its button. The sheet names the choice, its rows are 44px, and a choice closes it.

Style with classes (md:), which work before the page finishes loading. Use useIsMobile() only when the tree itself is different on a phone: one pane instead of two, a sheet instead of a menu.

import { useIsMobile } from "@brdgapp/ui/hooks/use-is-mobile";

// true below 768px; false until the page has loaded
function Inbox() {
  const phone = useIsMobile();
  const [open, setOpen] = useState<string | null>(null);
  if (phone) return open ? <Thread id={open} onBack={() => setOpen(null)} /> : <List onOpen={setOpen} />;
  return <SplitView … />;
}

• No sideways page scroll at any width. A wide table scrolls inside its own card.
• On phones the page leaves room above the bottom tabs, and anything floating sits above them.
• Components follow the window, not the box they sit in. Bridge doesn't use container queries.
• Hide with hidden md:block only what has another home on that screen: links that moved to the bottom tabs, a rail that moved above the column.