fix: restore sidebar CSS context in Lumière dashboard

The Lumière container now carries project-ds-nav-page and
project-list-wrapper so the sidebar picks up all its existing styles.
The grey-rectangle button issue and broken sidebar layout were caused
by those expected parent classes being absent.

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

services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx

@@ -66,7 +66,9 @@ const ProjectCard = memo(function ProjectCard({
       <div className="lumiere-card-body">
         <span className="lumiere-card-name">{project.name}</span>
         <div className="lumiere-card-meta">
-          <span className={`lumiere-format-badge lumiere-format-badge--${variant}`}>
+          <span
+            className={`lumiere-format-badge lumiere-format-badge--${variant}`}
+          >
             {getFormatLabel(variant)}
           </span>
           {ownerName && (
@@ -98,13 +100,21 @@ export function ProjectListLumiere() {
   const selectedTag = tags.find(tag => tag._id === selectedTagId)
 
   return (
-    <div className="project-list-lumiere">
+    // Keep project-ds-nav-page + website-redesign so the sidebar and navbar
+    // pick up all their existing CSS (scoped under those classes). The
+    // project-list-lumiere class then adds/overrides the card-grid styles.
+    <div className="project-ds-nav-page website-redesign project-list-lumiere">
       <SystemMessages />
       <DefaultNavbar {...navbarProps} showCloseIcon />
-      <div className="lumiere-layout">
+      {/* project-list-wrapper is required by sidebar CSS */}
+      <div className="project-list-wrapper">
         <SidebarDsNav />
-        <div className="lumiere-main-wrapper">
-          <main className="lumiere-main" aria-labelledby="lumiere-title">
+        <div className="project-ds-nav-content-and-messages lumiere-content-area">
+          <div className="project-ds-nav-content lumiere-scroll-area">
+            <main
+              className="project-ds-nav-main lumiere-main"
+              aria-labelledby="lumiere-title"
+            >
               <UserNotifications />
               {error && <DashApiError />}
               <div className="lumiere-header">
@@ -141,8 +151,9 @@ export function ProjectListLumiere() {
             </main>
             <Footer {...footerProps} />
           </div>
-      </div>
           <CookieBanner />
         </div>
+      </div>
+    </div>
   )
 }

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

@@ -1,40 +1,15 @@
-// Verso Lumière — card-based project dashboard theme
+// Verso Lumière — card-based project dashboard theme.
+//
+// The outer element carries both project-ds-nav-page (for sidebar/navbar CSS)
+// and project-list-lumiere (our hook). We only override what differs from the
+// classic light theme: the content area background and the card grid layout.
 
 .project-list-lumiere {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background: #f0f4f8;
-
-  .lumiere-layout {
-    display: flex;
-    flex: 1;
-    min-height: 0;
-
-    // Reuse the existing sidebar but give it a white background in Lumière
-    .project-list-sidebar-wrapper-react {
-      background: #ffffff;
-      border-right: 1px solid #e2e8f0;
-    }
-  }
-
-  .lumiere-main-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-    overflow-y: auto;
-  }
-
-  .lumiere-main {
-    flex: 1;
-    padding: 2rem 2.5rem;
-    max-width: 1400px;
-    width: 100%;
-
-    @media (max-width: 768px) {
-      padding: 1.25rem 1rem;
-    }
+  // ── Content-area background ─────────────────────────────────────────────
+  // The classic theme uses --ds-nav-content-bg-secondary (a light grey).
+  // Lumière uses a cooler, airier blue-grey.
+  .project-ds-nav-content {
+    background-color: #f0f4f8;
   }
 
   // ── Header ──────────────────────────────────────────────────────────────
@@ -44,7 +19,7 @@
     align-items: flex-start;
     justify-content: space-between;
     gap: 1rem;
-    margin-bottom: 2rem;
+    margin-bottom: 1.75rem;
     flex-wrap: wrap;
   }
 
@@ -56,14 +31,14 @@
     flex-wrap: wrap;
   }
 
-  // Override ProjectListTitle so it renders with Lumière typography
+  // Override ProjectListTitle styling for the Lumière serif look
   .lumiere-title {
-    font-family: Georgia, 'Times New Roman', 'DejaVu Serif', serif;
-    font-size: 2.25rem;
-    font-weight: 700;
-    color: #1a2e3b;
-    line-height: 1.15;
-    margin: 0;
+    font-family: Georgia, 'Times New Roman', 'DejaVu Serif', serif !important;
+    font-size: 2rem !important;
+    font-weight: 700 !important;
+    color: #1a2e3b !important;
+    line-height: 1.15 !important;
+    margin: 0 !important;
   }
 
   // ── Empty state ─────────────────────────────────────────────────────────
@@ -80,7 +55,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 1.5rem;
-    margin-top: 1.5rem;
+    margin-top: 0.5rem;
   }
 
   // ── Individual card ──────────────────────────────────────────────────────