responsive-design

Responsive design

Overview

The chat app must render correctly on mobile (≤768px) and desktop (≥769px). Desktop is the historical baseline — most existing code is desktop-only. Treat mobile-first as the authoring default for new and changed UI: write the base classes for the smallest supported viewport and add desktop overrides via desktop:.

Project breakpoints

Defined in tailwind.config.js (extend.screens) and inherited by all lib Tailwind configs via preset:

// tailwind.config.js — extend.screens
mobile: { max: '768px' },   // ≤768 px  — phones and small tablets
desktop: { min: '769px' },  // ≥769 px  — tablets landscape, laptops, monitors

Prefix	Range	When to use
(no prefix)	always	mobile-first base — smallest layout
mobile:	≤768 px	overrides that apply only mobile
desktop:	≥769 px	overrides that kick in on desktop

desktop: is a min-width prefix — styles cascade upward to all wider viewports.

Do not use small_tablet:, large_tablet:, large_desktop: — these prefixes are not in the config and Tailwind will silently ignore any class that uses them.

Do not use sm: / md: / lg: / xl: — the default Tailwind breakpoints exist in the config (via extend) but are out of scope for this project and should not be used.

When to use Tailwind prefixes vs. a JS hook

Default: Tailwind utility prefixes. They are SSR-safe, avoid first-paint flicker, and keep layout decisions in markup.

<aside className="hidden desktop:block">…</aside>
<button className="h-12 mobile:h-14">…</button>

Escape hatch: useBreakpoint / useIsMobile from apps/chat/src/hooks/breakpoint/useBreakpoint.ts. Reach for these only when:

• A component must mount entirely different subtrees per breakpoint (e.g. drawer vs. persistent sidebar) and a CSS-only hidden/block swap would still mount both
• An effect or imperative handler needs to branch on viewport size (focus, autoplay, virtualisation row count)
• A third-party component accepts a prop that toggles its mobile layout