Adaptive overlays for desktop & mobile

import { useMediaQuery, Popover, PopoverTrigger, PopoverSurface, Sheet, SheetTrigger, SheetContent } from "@/components/ui";

// Share menu: a Popover anchored to the button on desktop, a bottom sheet within thumb reach on phones.
function ShareAction() {
  const isDesktop = useMediaQuery("(min-width: 768px)");
  const trigger = <Button icon={<Share20Regular />}>Share</Button>;

  if (isDesktop) {
    return (
      <Popover>
        <PopoverTrigger asChild>{trigger}</PopoverTrigger>
        <PopoverSurface><ShareOptions /></PopoverSurface>
      </Popover>
    );
  }
  return (
    <Sheet mode="bottom" snapPoints={[0.4]}>
      <SheetTrigger asChild>{trigger}</SheetTrigger>
      <SheetContent>
        <SheetHeader><SheetTitle>Share</SheetTitle></SheetHeader>
        <SheetBody><ShareOptions /></SheetBody>
      </SheetContent>
    </Sheet>
  );
}

<Sheet
  side="end"              // desktop: panel on the inline-end edge (left in RTL)
  size="medium"           // 592px
  breakpoint="3xl"        // < 48rem (768px) → bottom sheet
  snapPoints={[0.45, 0.9]}
  onSnapPointChange={(snap) => analytics.track("sheet_snap", { snap })}
>
  <SheetTrigger asChild><Button>Order details</Button></SheetTrigger>
  <SheetContent>
    <SheetHeader action={<SheetClose asChild><Button appearance="subtle" icon={<Dismiss24Regular />} aria-label="Close" /></SheetClose>}>
      <SheetTitle>Order #2026-1020</SheetTitle>
      <SheetDescription>3 items · delivery by 18:00</SheetDescription>
    </SheetHeader>
    <SheetBody>{/* long content: only scrolls when the sheet is at its highest snap point */}</SheetBody>
    <SheetFooter>{/* always stays at the bottom of the screen, even at the 45% snap point */}</SheetFooter>
  </SheetContent>
</Sheet>

<!-- index.html: enable env(safe-area-inset-*) and let the on-screen keyboard shrink the content -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content"
/>

// CSS: Sheet already uses motion-reduce:animate-none / motion-reduce:transition-none.
// JS: behavior you write yourself reads the user's preference directly.
const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");

list.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" });