From f629f6a50cda11f66ffdbe9b74bd5fd8f1895bf5 Mon Sep 17 00:00:00 2001 From: claude Date: Thu, 18 Jun 2026 12:19:10 +0000 Subject: [PATCH] Mobile polish: max thumbnail quality, tab-bar filter chips, fix vertical split default MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- services/clsi/app/js/ConversionManager.js | 2 +- .../components/layout/main-layout.tsx | 9 ++- .../pages/project-list-lumiere.scss | 55 +++++++++++++------ 3 files changed, 46 insertions(+), 20 deletions(-) diff --git a/services/clsi/app/js/ConversionManager.js b/services/clsi/app/js/ConversionManager.js index 0b0ff626cf..497c65c3d9 100644 --- a/services/clsi/app/js/ConversionManager.js +++ b/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' diff --git a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx b/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx index 04ceaffab6..60512672c2 100644 --- a/services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx +++ b/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'} diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss index 451b71cea0..f040585b33 100644 --- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss +++ b/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; - gap: 0.4rem 0.5rem; + align-items: stretch; + 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; - gap: 0.4rem; + flex-wrap: nowrap; + 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; - border-radius: 20px; + padding: 0.5rem 0.75rem; font-size: 0.8rem; font-weight: 500; - border: 1.5px solid $lum-border; - background: rgba(255, 255, 255, 0.7); + background: none; + 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.4; + line-height: 1.3; + transition: color 0.15s ease, border-color 0.15s ease; &.active { - background: $lum-teal; - border-color: $lum-teal; - color: #fff; + color: $lum-teal; + border-bottom-color: $lum-teal; font-weight: 600; } &:hover:not(.active), &:focus:not(.active) { - border-color: rgba($lum-teal, 0.55); - color: $lum-teal; - background: rgba($lum-teal, 0.07); + color: $lum-text; + } + + &:focus-visible { + outline: 2px solid rgba($lum-teal, 0.4); + outline-offset: -2px; } }