lumiere mobile: wrap filter pills instead of horizontal scroll

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 <noreply@anthropic.com>

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 {