fix(ui): flatten nav into horizontal scroll on mobile/tablet

On screens under 1100px, the nav groups were displaying in a confusing
grid-like pattern. This flattens all nav items into a single horizontal
scrollable row using display:contents to unwrap the group containers.

Also fixes the issue where collapsed nav groups would hide items on
mobile (where the toggle button is hidden), making them inaccessible.

ui/src/styles/layout.mobile.css

@@ -1,3 +1,53 @@
+/* Tablet/Mobile nav fix (under 1100px) - single horizontal scroll row */
+@media (max-width: 1100px) {
+  /* Flatten nav into single horizontal scroll */
+  .nav {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 6px;
+    padding: 10px 12px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Nav groups should flow inline, not stack */
+  .nav-group {
+    display: contents; /* Flatten group wrapper - items flow directly into .nav */
+  }
+
+  .nav-group__items {
+    display: contents; /* Flatten items wrapper too */
+  }
+
+  /* Hide group labels on tablet/mobile */
+  .nav-label {
+    display: none;
+  }
+
+  /* Don't hide nav items even if group is "collapsed" */
+  .nav-group--collapsed .nav-group__items {
+    display: contents;
+  }
+
+  .nav-item {
+    padding: 8px 14px;
+    font-size: 13px;
+    border-radius: 10px;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .nav-item::before {
+    display: none;
+  }
+}
+
 /* Mobile-specific improvements */
 @media (max-width: 600px) {
   .shell {