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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user