# AppointmentBookDialog

## 2026-08-12 — Responsive meeting-format toggle and Date/Time layout

**Prompted by:** Thinh (dev feedback) — the Book an Appointment dialog overflowed on narrow screens

### What changed
- Meeting-format options (Call / Google Meet / Offline Meeting) render as a single-column grid on
  mobile and a 3-column grid at `sm` and up, instead of a fixed flex row that clipped the longer
  labels.
- The Date + Time-slot section stacks vertically on mobile (`grid-cols-1`) and sits side by side at
  `sm` and up (`sm:grid-cols-[auto_1fr]`), so the Time column is no longer cut off.

### Why
- With the dialog now shrinking to fit small viewports, its inner two-up layouts also need to
  collapse; previously the format buttons and the Time column overflowed the dialog on a phone.

### Affected tokens / files
- `packages/shadcn/src/components/ui/appointment-book-dialog.tsx`