Adjust toast-message animations, especially for prefers-reduced-motion

src/sidebar/components/ToastMessages.js

@@ -120,8 +120,13 @@ function ToastMessages({ toastMessenger }) {
           <li
             className={classnames(
               'relative w-full container hover:cursor-pointer',
-              'animate-slide-in-from-right ',
               {
+                // Slide in from right in narrow viewports; fade in in
+                // larger viewports to toast message isn't flying too far
+                'motion-safe:animate-slide-in-from-right lg:animate-fade-in':
+                  !message.isDismissed,
+                // Only ever fade in if motion-reduction is preferred
+                'motion-reduce:animate-fade-in': !message.isDismissed,
                 'animate-fade-out': message.isDismissed,
               }
             )}

tailwind.config.mjs

@@ -18,6 +18,7 @@ export default {
       animation: {
         'adder-pop-down': 'adder-pop-down 0.08s ease-in forwards',
         'adder-pop-up': 'adder-pop-up 0.08s ease-in forwards',
+        'fade-in': 'fade-in 0.3s forwards',
         'fade-in-slow': 'fade-in 1s ease-in',
         'fade-out': 'fade-out 0.3s forwards',
         'slide-in-from-right': 'slide-in-from-right 0.3s forwards ease-in-out',