From c0729ab4f344b5cc11cab642e738705d3391221b Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 6 Mar 2026 20:32:57 -0500
Subject: [PATCH] a11y(launcher): dark mode, touch targets, overflow,
 transition speed

Shell (+layout.svelte):
- fix: header bg-slate-200 -> dark:bg-slate-800 (projector/night use)
- fix: main content bg-gray-100 -> dark:bg-gray-900
- fix: config drawer bg-orange-100 -> dark:bg-slate-800
- fix: debug drawer bg-red-100 -> dark:bg-slate-900
- fix: footer border-gray-200 -> border-gray-300 (invisible border fixed)
- fix: remove header hover:text-base (caused layout shift on hover)
- fix: remove footer hover:sm:text-sm etc. (layout shift + broken TW4 syntax)
- fix: header/footer/status spans duration-1000 -> duration-300 (too slow)
- fix: footer opacity-50 -> opacity-70 (was too dim for projector/status reading)
- fix: nav section add overflow-y-auto (sessions overflowed on short screens)
- fix: nav section remove hover:bg-surface-100-900 (confusing whole-panel hover)
- a11y: header menu toggle button class=''->'px-2 py-1 rounded...' (touch target)
- a11y: footer edit_mode button class=''->'px-1.5 py-1 rounded...' (touch target)
- a11y: footer status spans px-1 -> px-2 py-0.5 (slightly larger tap area)
- a11y: footer datetime add dark:hover:bg-slate-700
---
 .../(launcher)/launcher/+layout.svelte        | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte b/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
index 0246bf61..15692529 100644
--- a/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
@@ -445,18 +445,19 @@
 
         flex flex-row items-center justify-around sm:justify-between
 
-        text-sm hover:text-base
+        text-sm
 
-        bg-slate-200
+        bg-slate-200 dark:bg-slate-800
 
-        opacity-90 hover:opacity-100
-        transition-all duration-1000
+        opacity-95 hover:opacity-100
+        transition-colors duration-300
         "
     >
         <h3 class="h4 text-center italic text-surface-600-400">
+            <!-- Menu toggle: needs a real tap target for tablet/touch operators -->
             <button
                 type="button"
-                class=""
+                class="px-2 py-1 rounded hover:bg-surface-500/10 transition-colors"
                 onclick={() => {
                     $events_loc.launcher.hide__launcher_menu =
                         !$events_loc.launcher.hide__launcher_menu;
@@ -512,7 +513,7 @@
         items-center
         justify-start sm:justify-center
         py-1 px-0.5
-        bg-gray-100
+        bg-gray-100 dark:bg-gray-900
 
         "
     >
@@ -525,9 +526,9 @@
         max-w-xs
         pt-0.5 pr-0.5
         flex flex-col gap-1 items-center justify-start
+        overflow-y-auto
 
         border-r border-gray-200 dark:border-gray-700
-        hover:bg-surface-100-900
         "
             class:hidden={$events_loc.launcher.hide__launcher_menu}
         >
@@ -610,25 +611,24 @@
         p-1 m-auto
 
         flex flex-row items-center justify-between
-        sm:flex-row md:items-center md:justify-between
 
-        text-xs hover:sm:text-sm hover:md:text-base hover:lg:text-lg
+        text-xs
 
-
-        bg-gray-200 border-t border-gray-200
+        bg-gray-200 border-t border-gray-300
         dark:bg-gray-800 dark:border-gray-600
 
-        opacity-50 hover:opacity-100
-        transition-all duration-1000
+        opacity-70 hover:opacity-100
+        transition-opacity duration-500
         "
 >
     <div
-        class="slct_location_name transition-all duration-1000"
+        class="slct_location_name transition-colors duration-300"
         title="Location ID: {$lq__event_location_obj?.event_location_id} Name: {$lq__event_location_obj?.name} | Device ID: {$lq__event_device_obj?.event_device_id} Name: {$lq__event_device_obj?.name}"
     >
+        <!-- Edit mode toggle: needs tap target for tablet operators -->
         <button
             type="button"
-            class=""
+            class="px-1.5 py-1 rounded hover:bg-surface-500/10 transition-colors"
             onclick={() => {
                 $ae_loc.edit_mode = !$ae_loc.edit_mode;
             }}
@@ -647,7 +647,7 @@
     <span
         class:preset-tonal-warning={!$idle}
         class:preset-tonal-success={$idle}
-        class="group px-1 rounded-md transition-all duration-1000"
+        class="group px-2 py-0.5 rounded-md transition-colors duration-300"
         title="The user is currently {$idle ? 'idle' : 'active'}"
     >
         {#if $idle}
@@ -660,7 +660,7 @@
     </span>
 
     <span
-        class="group px-1 rounded-md transition-all duration-1000"
+        class="group px-2 py-0.5 rounded-md transition-colors duration-300"
         title="Online status = {online?.current}"
     >
         <span class="fas fa-wifi mx-1"></span>
@@ -673,7 +673,7 @@
             'connected'}
         class:preset-tonal-success={$events_sess.launcher.ws_connect_status ==
             'connected'}
-        class="group px-1 rounded-md transition-all duration-1000"
+        class="group px-2 py-0.5 rounded-md transition-colors duration-300"
         title="WebSocket is {$events_sess.launcher.ws_connect_status ==
         'connected'
             ? 'connected'
@@ -689,7 +689,7 @@
     </span>
 
     <div
-        class="current_datetime font-mono px-2 hover:font-bold hover:bg-white transition-all"
+        class="current_datetime font-mono px-2 hover:font-bold hover:bg-white dark:hover:bg-slate-700 transition-colors"
     >
         <span class="hidden md:inline">
             <span class="fas fa-calendar-alt"></span>
@@ -710,7 +710,7 @@
     <button
         type="button"
         onclick={() => ($events_loc.launcher.hide_drawer__cfg = false)}
-        class="btn btn-sm p-2.5 preset-tonal-error hover:preset-filled-error-500 transition-all duration-1000"
+        class="btn btn-sm p-3 preset-tonal-error hover:preset-filled-error-500 transition-colors duration-300"
         class:opacity-25={!$ae_loc.trusted_access}
         class:hover:opacity-75={!$ae_loc.trusted_access}
     >
@@ -720,7 +720,7 @@
 </div>
 
 <Drawer
-    class="bg-orange-100 opacity-90 hover:opacity-97 transition-all duration-1000 border border-gray-300 dark:border-gray-600 w-full md:w-96 lg:w-[32rem]"
+    class="bg-orange-50 dark:bg-slate-800 opacity-90 hover:opacity-97 transition-all duration-300 border border-gray-300 dark:border-gray-600 w-full md:w-96 lg:w-[32rem]"
     placement="left"
     {...{
         transitionType: 'fly',
@@ -770,7 +770,7 @@
 
 <Drawer
     activateClickOutside={false}
-    class="bg-red-100 opacity-75 hover:opacity-95 transition-all duration-1000"
+    class="bg-red-50 dark:bg-slate-900 opacity-75 hover:opacity-95 transition-all duration-300"
     placement="bottom"
     {...{
         transitionType: 'fly',