Overlay thích ứng desktop & mobile

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

// Menu chia sẻ: Popover neo vào nút trên desktop, bottom sheet trong tầm ngón cái trên điện thoại.
function ShareAction() {
  const isDesktop = useMediaQuery("(min-width: 768px)");
  const trigger = <Button icon={<Share20Regular />}>Chia sẻ</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>Chia sẻ</SheetTitle></SheetHeader>
        <SheetBody><ShareOptions /></SheetBody>
      </SheetContent>
    </Sheet>
  );
}

<Sheet
  side="end"              // desktop: panel ở cạnh cuối dòng (trái khi 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>Chi tiết đơn hàng</Button></SheetTrigger>
  <SheetContent>
    <SheetHeader action={<SheetClose asChild><Button appearance="subtle" icon={<Dismiss24Regular />} aria-label="Đóng" /></SheetClose>}>
      <SheetTitle>Đơn #2026-1020</SheetTitle>
      <SheetDescription>3 sản phẩm · giao trước 18:00</SheetDescription>
    </SheetHeader>
    <SheetBody>{/* nội dung dài — chỉ cuộn khi sheet ở nấc cao nhất */}</SheetBody>
    <SheetFooter>{/* luôn bám đáy màn hình, kể cả ở nấc 45% */}</SheetFooter>
  </SheetContent>
</Sheet>

<!-- index.html: bật env(safe-area-inset-*) và để bàn phím ảo co nội dung lại -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content"
/>

// CSS: Sheet dùng motion-reduce:animate-none / motion-reduce:transition-none sẵn.
// JS: hành vi tự viết đọc trực tiếp sở thích của người dùng.
const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");

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