From 5aab7162456f2d1ed2697c95996f7f7da4dacb8b Mon Sep 17 00:00:00 2001 From: claude Date: Thu, 18 Jun 2026 11:07:16 +0000 Subject: [PATCH] lumiere mobile: wrap filter pills instead of horizontal scroll MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit overflow-x: auto only clips content when every ancestor has a definite width; that constraint wasn't met so the pills were still expanding the page. Switch to flex-wrap: wrap so pills flow onto multiple rows and never cause horizontal overflow. Also allow the toolbar itself to wrap so the zoom control can drop to a new row if needed. Remove redundant sidebar hide rule — SidebarDsNav already has d-none d-md-flex so it was never contributing to the overflow. Co-Authored-By: Claude Sonnet 4.6 --- .../pages/project-list-lumiere.scss | 20 +++++-------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss index 438767acda..451b71cea0 100644 --- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss +++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss @@ -893,13 +893,6 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi @media (max-width: 767px) { - // The sidebar (min-width:200px) sits in a flex row with the content area, - // making the page ~575px wide on a 375px phone. Hide it — the filter pills - // in the mobile toolbar already replace all its functionality. - .project-list-sidebar-wrapper-react { - display: none !important; - } - // Stack the header vertically so nothing overflows the viewport width. // Without this, lumiere-header-actions (flex-shrink:0) forces the flex // container wider than the screen. @@ -987,23 +980,20 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi // ── Mobile toolbar: filter pills + zoom control ─────────────────────────── .lumiere-mobile-toolbar { - align-items: center; - gap: 0.5rem; + align-items: flex-start; + gap: 0.4rem 0.5rem; width: 100%; padding: 0.25rem 0 0.5rem; flex-shrink: 0; + flex-wrap: wrap; } .lumiere-mobile-filters { - overflow-x: auto; display: flex; - gap: 0.45rem; + flex-wrap: wrap; + gap: 0.4rem; flex: 1; min-width: 0; - scrollbar-width: none; - -ms-overflow-style: none; - - &::-webkit-scrollbar { display: none; } } .lumiere-mobile-zoom {