Improve touch device support in theme dock with larger targets and disable hover effects

Author: clairernovotny

lexicon.html

@@ -993,18 +993,41 @@
             color: #fff;
         }
 
-        /* === MOBILE: Scrollable dock with larger touch targets === */
-        @media (max-width: 768px) {
+        /* === TOUCH DEVICES: Larger targets, no hover effects === */
+        @media (hover: none), (pointer: coarse) {
             .theme-dock {
                 --dock-unit: 3px;           /* Larger for touch targets */
+            }
+
+            /* Disable hover effects on touch */
+            .theme-dock label:hover {
+                width: var(--dock-card-width);
+                height: var(--dock-card-height);
+                padding: var(--dock-card-padding-top) 0 var(--dock-card-padding-bottom) 0;
+                font-size: var(--dock-card-font);
+                border-radius: var(--dock-radius);
+                transform: none;
+                margin-bottom: 0;
+                box-shadow: none;
+            }
+
+            .theme-dock label:hover::after {
+                height: var(--dock-bar-height);
+            }
+        }
+
+        /* === NARROW VIEWPORT: Full-width scrollable dock ===
+           Breakpoint based on touch dock: 10×57px + 9×3px gaps + 12px padding ≈ 620px */
+        @media (max-width: 620px) {
+            .theme-dock {
                 left: 0;
                 right: 0;
                 transform: none;
                 border-radius: 0;
                 bottom: 0;
                 overflow-x: auto;
                 flex-wrap: nowrap;
-                justify-content: safe center; /* Center until overflow, then scroll */
+                justify-content: safe center;
             }
 
             /* Hide scrollbar */
@@ -1013,46 +1036,23 @@
             }
 
             .theme-dock {
-                -ms-overflow-style: none;   /* IE/Edge */
+                -ms-overflow-style: none;
             }
 
             @supports (scrollbar-width: none) {
                 .theme-dock {
-                    scrollbar-width: none;  /* Firefox */
+                    scrollbar-width: none;
                 }
             }
 
             .theme-dock label {
                 flex-shrink: 0;
             }
-
-            /* Disable hover effects on touch */
-            .theme-dock label:hover {
-                width: var(--dock-card-width);
-                height: var(--dock-card-height);
-                padding: var(--dock-card-padding-top) 0 var(--dock-card-padding-bottom) 0;
-                font-size: var(--dock-card-font);
-                border-radius: var(--dock-radius);
-                transform: none;
-                margin-bottom: 0;
-                box-shadow: none;
-            }
-
-            .theme-dock label:hover::after {
-                height: var(--dock-bar-height);
-            }
-
-            /* Wrapper not needed on mobile without JS arrows */
-            .theme-dock-wrapper {
-                display: contents;
-            }
         }
 
-        /* Desktop: wrapper does nothing */
-        @media (min-width: 769px) {
-            .theme-dock-wrapper {
-                display: contents;
-            }
+        /* Wrapper always uses display:contents (no-op) */
+        .theme-dock-wrapper {
+            display: contents;
         }
 
         /* === HIDDEN RADIO INPUTS === */