fix(web): honor prefers-reduced-motion; contain overscroll in modal surfaces (#71)

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>
This commit is contained in:
2026-06-10 13:38:37 +02:00
parent 78f5afad35
commit 9a896bb5f6
5 changed files with 17 additions and 4 deletions
+13
View File
@@ -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 {