Bottom sheet

A bottom sheet is a panel that rises from the bottom edge, stops at one of a few heights, and can be dragged between them or flicked away. It exists because phones are tall and thumbs are low: the controls land where the hand already is. iOS calls the stopping points detents (medium, large), Material calls the whole thing a bottom sheet, and everyone calls the little grey bar at the top a grabber or drag handle.

Use a modal bottom sheet (dimmed scrim, blocks the page) for the mobile job a modal dialog does on desktop: pick an option, confirm, share, filter. Use a persistent one, peeking at the bottom with the app still usable behind it, for a companion surface like a map's place list or a now-playing bar that expands. Snap points are the design decision worth spending time on: a peek height that shows the first row, a half height for the common case, full height for the long tail. Vaul is the go-to React implementation.

Gotcha: dragging and scrolling fight each other. A sheet with a scrollable body has to let the drag move the sheet only when the content is already scrolled to the top, otherwise every attempt to read the list closes the thing. Two more: pad for the home indicator with env(safe-area-inset-bottom), and size with dvh rather than vh so the sheet doesn't hide under mobile browser chrome.