Mobile polish: max thumbnail quality, tab-bar filter chips, fix vertical split default

- CLSI thumbnails: bump to 794px/q90 (matches preview quality) for
  crisp display on 2x/3x phone screens
- Lumière filter chips → underline tab bar: single scrollable row with
  teal active indicator, no more wrapping alignment issues; zoom buttons
  separated by a vertical divider on the right
- Fix editor vertical split default on mobile: disable react-resizable-panels
  autoSaveId on mobile to prevent a stale collapsed PDF pane from firing
  onCollapse → changeLayout('flat') and overriding the verticalSplit
  default set by getInitialLayout()

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

services/clsi/app/js/ConversionManager.js

@@ -24,7 +24,7 @@ const CONVERSION_CONFIGS = {
 
 const PDF_TO_JPEG_CONFIGS = {
   preview: { width: 794, quality: 90 },
-  thumbnail: { width: 400, quality: 80 },
+  thumbnail: { width: 794, quality: 90 },
 }
 
 const PDF_TO_JPEG_INPUT_FILENAME = 'input.pdf'

services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx

@@ -83,7 +83,14 @@ export default function MainLayout() {
               key={isVertical ? 'vertical' : 'horizontal'}
               autoSaveId={
                 isVertical
-                  ? 'ide-redesign-editor-and-pdf-panel-group-vertical'
+                  ? // On mobile, skip autoSave: a stale collapsed PDF pane
+                    // would fire onCollapse → changeLayout('flat'), overriding
+                    // the verticalSplit default from getInitialLayout().
+                    // The pdf.layout localStorage key already persists the
+                    // user's explicit flat/open preference independently.
+                    isMobile
+                    ? null
+                    : 'ide-redesign-editor-and-pdf-panel-group-vertical'
                   : 'ide-redesign-editor-and-pdf-panel-group'
               }
               direction={isVertical ? 'vertical' : 'horizontal'}

services/web/frontend/stylesheets/pages/project-list-lumiere.scss

@@ -979,53 +979,72 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
 
   // ── Mobile toolbar: filter pills + zoom control ───────────────────────────
 
+  // ── Mobile toolbar: tab-bar filters + zoom buttons ───────────────────────
+  // Single row — filters scroll horizontally, zoom group is fixed on the right.
+  // The header is flex-direction:column on mobile so the toolbar has a definite
+  // width; overflow-x:auto on the filters is safe and doesn't leak into the page.
+
   .lumiere-mobile-toolbar {
-    align-items: flex-start;
+    align-items: stretch;
-    gap: 0.4rem 0.5rem;
+    gap: 0;
     width: 100%;
-    padding: 0.25rem 0 0.5rem;
     flex-shrink: 0;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    border-bottom: 1.5px solid $lum-border;
+    margin-bottom: 0.25rem;
   }
 
   .lumiere-mobile-filters {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
-    gap: 0.4rem;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
     flex: 1;
     min-width: 0;
+
+    &::-webkit-scrollbar { display: none; }
   }
 
   .lumiere-mobile-zoom {
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    padding-left: 0.5rem;
+    border-left: 1.5px solid $lum-border;
+    margin: 0.3rem 0;
   }
 
+  // Tab-style filter buttons — underline on active, no background/pill shape
   .lumiere-mobile-filter-pill {
     flex-shrink: 0;
-    padding: 0.3rem 0.8rem;
+    padding: 0.5rem 0.75rem;
-    border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 500;
-    border: 1.5px solid $lum-border;
+    background: none;
-    background: rgba(255, 255, 255, 0.7);
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1.5px;  // sit the active underline flush with the toolbar border
     color: $lum-text-sub;
     cursor: pointer;
     white-space: nowrap;
-    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
+    line-height: 1.3;
-    line-height: 1.4;
+    transition: color 0.15s ease, border-color 0.15s ease;
 
     &.active {
-      background: $lum-teal;
+      color: $lum-teal;
-      border-color: $lum-teal;
+      border-bottom-color: $lum-teal;
-      color: #fff;
       font-weight: 600;
     }
 
     &:hover:not(.active),
     &:focus:not(.active) {
-      border-color: rgba($lum-teal, 0.55);
+      color: $lum-text;
-      color: $lum-teal;
+    }
-      background: rgba($lum-teal, 0.07);
+
+    &:focus-visible {
+      outline: 2px solid rgba($lum-teal, 0.4);
+      outline-offset: -2px;
     }
   }