Responsive shadcn Dialog: Card on Desktop, Bottom Sheet on Phones

A tutorial describes how to build a single shadcn/ui dialog that shows a centered Dialog above 768px and a draggable Drawer bottom sheet on phones. The shadcn docs' example duplicates the trigger, header and form across two branches, and picks the branch with a hook that initially guesses wrong, causing remounts and flicker. The author instead puts a breakpoint switch inside one root component, so content is written once and open state persists across resizes. The breakpoint is read with useSyncExternalStore so server and hydration renders match. Ready-made wrappers such as Credenza and Dice UI are mentioned as alternatives, with a caveat about their initial-render behavior.