fix: ensure animated elements are visible when prefers-reduced-motion is enabled (#7047)

zanesq · web-flow · commit 4dc1fbedd044 · 2026-02-06T19:27:08.000Z
diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css
@@ -373,6 +373,11 @@
   [class*='animate-[wind'] {
     animation: none !important;
   }
+
+  /* Elements that use opacity-0 with appear animation need to be visible when animations are disabled */
+  .opacity-0[class*='animate-'] {
+    opacity: 1 !important;
+  }
 }
 
 /* Toast close button styling */

Original file line number	Diff line number	Diff line change
`@@ -373,6 +373,11 @@`
`373`	`373`	`[class*='animate-[wind'] {`
`374`	`374`	`animation: none !important;`
`375`	`375`	`}`
	`376`	`+`
	`377`	`+ /* Elements that use opacity-0 with appear animation need to be visible when animations are disabled */`
	`378`	`+ .opacity-0[class*='animate-'] {`
	`379`	`+ opacity: 1 !important;`
	`380`	`+ }`
`376`	`381`	`}`
`377`	`382`
`378`	`383`	`/* Toast close button styling */`