style(webui): animate settings section transitions

2026-07-30 01:13:37 +08:00
parent 7561d846fa
commit 962cdb968d
2 changed files with 34 additions and 2 deletions
@@ -2347,8 +2347,12 @@ export function SettingsView({
        )}
      >
        <div
+          key={activeSection}
+          data-testid="settings-section-transition"
+          data-settings-section={activeSection}
          className={cn(
-            "mx-auto w-full px-4 py-6 sm:px-8 sm:py-8 lg:py-12",
+            "mx-auto w-full animate-in fade-in-0 slide-in-from-bottom-1 px-4 py-6 duration-200 ease-out",
+            "motion-reduce:animate-none sm:px-8 sm:py-8 lg:py-12",
            activeSection === "channels" ? "max-w-[1240px] xl:px-10" : "max-w-[920px]",
            activeSection === "channels" && "flex min-h-full flex-col xl:h-full xl:min-h-0",
            hostChromeInset && "pt-[4.25rem] sm:pt-[4.25rem] lg:pt-[4.75rem]",