fix: transitions honor prefers-reduced-motion, and Playwright runs with it, so no click lands on a list still sliding open

frontend/playwright.config.ts

@@ -29,6 +29,8 @@ export default defineConfig({
   ],
   use: {
     baseURL: 'https://localhost:5001',
+    // The app's Svelte transitions honor it, so a click never lands on a list that is still sliding open
+    reducedMotion: 'reduce',
     ignoreHTTPSErrors: true,
     trace: 'retain-on-failure',
     screenshot: 'only-on-failure',

frontend/src/components/Header.svelte

@@ -11,6 +11,7 @@
         UserRole,
     } from '#lib/api/index.ts';
     import { setMode, userPrefersMode } from 'mode-watcher';
+    import { prefersReducedMotion } from 'svelte/motion';
     import { fade } from 'svelte/transition';
     import { MediaQuery } from 'svelte/reactivity';
     import NotificationCenter from '#components/NotificationCenter.svelte';
@@ -188,8 +189,8 @@
         <div
             data-testid="mobile-menu"
             class="lg:hidden absolute top-16 left-0 right-0 bg-surface shadow-lg border-t px-2 py-3 sm:px-3"
-            in:fade={{ duration: 150 }}
-            out:fade={{ duration: 100 }}
+            in:fade={{ duration: prefersReducedMotion.current ? 0 : 150 }}
+            out:fade={{ duration: prefersReducedMotion.current ? 0 : 100 }}
         >
             {#if page.data.user}
                 {@const user = page.data.user}

frontend/src/components/editor/SavedScripts.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { prefersReducedMotion } from 'svelte/motion';
     import { slide } from 'svelte/transition';
     import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query';
     import { List, Trash } from '@lucide/svelte';
@@ -59,7 +60,7 @@
         </button>
     </div>
     {#if show}
-        <div class="mt-2" transition:slide={{ duration: 200 }}>
+        <div class="mt-2" transition:slide={{ duration: prefersReducedMotion.current ? 0 : 200 }}>
             {#if scripts.length > 0}
                 <div class="saved-scripts-container border rounded-lg bg-page shadow-inner">
                     <ul class="divide-y">

frontend/src/routes/(auth)/editor/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { prefersReducedMotion } from 'svelte/motion';
     import { fade, slide } from 'svelte/transition';
     import { createQuery } from '@tanstack/svelte-query';
     import { CirclePlay, Settings, Lightbulb } from '@lucide/svelte';
@@ -52,7 +53,10 @@
     />
 </svelte:head>
 
-<div class="editor-grid-container space-y-4 md:space-y-0 md:gap-6" in:fade={{ duration: 300 }}>
+<div
+    class="editor-grid-container space-y-4 md:space-y-0 md:gap-6"
+    in:fade={{ duration: prefersReducedMotion.current ? 0 : 300 }}
+>
     <div class="editor-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <h2 class="sm:text-2xl whitespace-nowrap">Code Editor</h2>
         <ResourceLimits />
@@ -117,7 +121,10 @@
             {#if showOptions}
                 <div
                     class="p-4 bg-surface border rounded-lg flex gap-x-4"
-                    transition:slide={{ duration: 300, easing: (t) => 1 - Math.pow(1 - t, 3) }}
+                    transition:slide={{
+                        duration: prefersReducedMotion.current ? 0 : 300,
+                        easing: (t) => 1 - Math.pow(1 - t, 3),
+                    }}
                 >
                     <div class="w-1/2">
                         <ScriptActions />

frontend/src/routes/(auth)/notifications/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { toast } from 'svelte-sonner';
     import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query';
+    import { prefersReducedMotion } from 'svelte/motion';
     import { fly } from 'svelte/transition';
     import Spinner from '#components/Spinner.svelte';
     import {
@@ -145,7 +146,7 @@
             {#each notifications as notification (notification.notification_id)}
                 {@const NotifIcon = notificationIcon(notification.tags)}
                 <article
-                    in:fly={{ y: 20, duration: 300 }}
+                    in:fly={{ y: 20, duration: prefersReducedMotion.current ? 0 : 300 }}
                     class={[
                         'card flex items-start gap-4 p-4',
                         notification.status !== NotificationStatus.READ && 'bg-info-soft border-info/30',

frontend/src/routes/login/+page.svelte

@@ -9,6 +9,7 @@
     import { apiForm, filled } from '#lib/forms.ts';
     import { fieldTitle } from '#lib/formatters.ts';
     import { toast } from 'svelte-sonner';
+    import { prefersReducedMotion } from 'svelte/motion';
     import { fade, fly } from 'svelte/transition';
     import Spinner from '#components/Spinner.svelte';
 
@@ -65,7 +66,10 @@
     />
 </svelte:head>
 
-<div class="min-h-[60vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8" in:fade>
+<div
+    class="min-h-[60vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
+    in:fade={{ duration: prefersReducedMotion.current ? 0 : 400 }}
+>
     <div class="max-w-md w-full space-y-8">
         <div class="text-center">
             <h2 class="text-3xl font-bold">Sign in to your account</h2>
@@ -81,7 +85,7 @@
                 <p
                     class="mt-0 text-sm text-danger text-center"
                     data-testid="error-message"
-                    in:fly={{ y: -10, duration: 200 }}
+                    in:fly={{ y: -10, duration: prefersReducedMotion.current ? 0 : 200 }}
                 >
                     {error}
                 </p>

frontend/src/routes/register/+page.svelte

@@ -2,6 +2,7 @@
     import { resolve } from '$app/paths';
     import { goto } from '$app/navigation';
     import { toast } from 'svelte-sonner';
+    import { prefersReducedMotion } from 'svelte/motion';
     import { fade, fly } from 'svelte/transition';
     import * as z from 'zod/mini';
     import { createMutation } from '@tanstack/svelte-query';
@@ -79,7 +80,10 @@
     />
 </svelte:head>
 
-<div class="min-h-[60vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8" in:fade>
+<div
+    class="min-h-[60vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
+    in:fade={{ duration: prefersReducedMotion.current ? 0 : 400 }}
+>
     <div class="max-w-md w-full space-y-8">
         <div class="text-center">
             <h2 class="text-3xl font-bold">Create a new account</h2>
@@ -93,7 +97,7 @@
                 <p
                     class="mt-0 text-sm text-danger text-center"
                     data-testid="error-message"
-                    in:fly={{ y: -10, duration: 200 }}
+                    in:fly={{ y: -10, duration: prefersReducedMotion.current ? 0 : 200 }}
                 >
                     {error}
                 </p>