From 9a896bb5f6fc61e2161d1b228411aa04e91de6ce Mon Sep 17 00:00:00 2001
From: Anders Olsson <anders.e.olsson@gmail.com>
Date: Wed, 10 Jun 2026 13:38:37 +0200
Subject: [PATCH] fix(web): honor prefers-reduced-motion; contain overscroll in
 modal surfaces (#71)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nothing in the app respected prefers-reduced-motion — the kit's
data-open/closed animations, the skeleton pulse, and the sidebar width
transition all ran unconditionally. Add a global base-layer rule that
collapses animation/transition durations to a single frame when the OS
asks for reduced motion; one rule covers current and future additions.

Add overscroll-y-contain to the scrollable modal/popup surfaces
(DrawerContent, SelectContent, ComboboxPopup) so flicking past the end
of their content no longer chain-scrolls the page beneath, and to
AlertDialogContent for when it gains scrollable content.

Verified in the built CSS: the media query and
overscroll-behavior-y:contain both compile into dist/assets.

Closes #71

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/components/ui/alert-dialog.tsx |  2 +-
 web/src/components/ui/combobox.tsx     |  2 +-
 web/src/components/ui/drawer.tsx       |  2 +-
 web/src/components/ui/select.tsx       |  2 +-
 web/src/index.css                      | 13 +++++++++++++
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/web/src/components/ui/alert-dialog.tsx b/web/src/components/ui/alert-dialog.tsx
index ead776d..f4cdeee 100644
--- a/web/src/components/ui/alert-dialog.tsx
+++ b/web/src/components/ui/alert-dialog.tsx
@@ -50,7 +50,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 overscroll-y-contain rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
diff --git a/web/src/components/ui/combobox.tsx b/web/src/components/ui/combobox.tsx
index 1f677ec..16c9b6b 100644
--- a/web/src/components/ui/combobox.tsx
+++ b/web/src/components/ui/combobox.tsx
@@ -62,7 +62,7 @@ function ComboboxPopup({ className, ...props }: ComboboxPrimitive.Popup.Props) {
         <ComboboxPrimitive.Popup
           data-slot="combobox-popup"
           className={cn(
-            "max-h-64 min-w-48 overflow-auto rounded border bg-popover p-1 text-sm text-popover-foreground shadow-md",
+            "max-h-64 min-w-48 overflow-auto overscroll-y-contain rounded border bg-popover p-1 text-sm text-popover-foreground shadow-md",
             className,
           )}
           {...props}
diff --git a/web/src/components/ui/drawer.tsx b/web/src/components/ui/drawer.tsx
index ae95a60..c8d2483 100644
--- a/web/src/components/ui/drawer.tsx
+++ b/web/src/components/ui/drawer.tsx
@@ -35,7 +35,7 @@ function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.
         <DrawerPrimitive.Popup
           data-slot="drawer-content"
           className={cn(
-            "fixed inset-y-0 right-0 flex w-full max-w-md flex-col overflow-y-auto bg-background shadow-xl outline-none duration-200 data-open:animate-in data-open:slide-in-from-right data-closed:animate-out data-closed:slide-out-to-right",
+            "fixed inset-y-0 right-0 flex w-full max-w-md flex-col overflow-y-auto overscroll-y-contain bg-background shadow-xl outline-none duration-200 data-open:animate-in data-open:slide-in-from-right data-closed:animate-out data-closed:slide-out-to-right",
             className,
           )}
           {...props}
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
index 6d5ccfb..232c342 100644
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@@ -99,7 +99,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           className={cn(
-            "max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
+            "max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto overscroll-y-contain rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
             "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
             className
           )}
diff --git a/web/src/index.css b/web/src/index.css
index a0dfd6d..393f478 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -99,6 +99,19 @@
   body {
     @apply bg-background text-foreground font-sans;
   }
+
+  /* Collapse all animation/transition to a single frame for users who ask the
+     OS for reduced motion. Covers the kit's data-open/closed animations, the
+     skeleton pulse, and the sidebar width transition in one place. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
 }
 
 @layer components {