From 13577693f287f9ff97b41a9c758b031110d33728 Mon Sep 17 00:00:00 2001
From: claude <claude@verso>
Date: Thu, 11 Jun 2026 09:37:08 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20restore=20sidebar=20CSS=20context=20in?=
 =?UTF-8?q?=20Lumi=C3=A8re=20dashboard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/project-list-lumiere.tsx       | 85 +++++++++++--------
 .../pages/project-list-lumiere.scss           | 63 +++++---------
 2 files changed, 67 insertions(+), 81 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx b/services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx
index 950394aedf..6c79e9ef12 100644
--- a/services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx
+++ b/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,51 +100,60 @@ 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">
-            <UserNotifications />
-            {error && <DashApiError />}
-            <div className="lumiere-header">
-              <ProjectListTitle
-                filter={filter}
-                selectedTag={selectedTag}
-                selectedTagId={selectedTagId}
-                className="lumiere-title"
-                id="lumiere-title"
-              />
-              <div className="lumiere-header-actions">
-                <SearchForm
-                  inputValue={searchText}
-                  setInputValue={setSearchText}
+        <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">
+                <ProjectListTitle
                   filter={filter}
                   selectedTag={selectedTag}
+                  selectedTagId={selectedTagId}
+                  className="lumiere-title"
+                  id="lumiere-title"
                 />
-                <NewProjectButton
-                  id="lumiere-new-project-button"
-                  showAddAffiliationWidget
-                />
+                <div className="lumiere-header-actions">
+                  <SearchForm
+                    inputValue={searchText}
+                    setInputValue={setSearchText}
+                    filter={filter}
+                    selectedTag={selectedTag}
+                  />
+                  <NewProjectButton
+                    id="lumiere-new-project-button"
+                    showAddAffiliationWidget
+                  />
+                </div>
               </div>
-            </div>
-            {visibleProjects.length === 0 ? (
-              <p className="lumiere-empty">{t('no_projects')}</p>
-            ) : (
-              <div className="lumiere-card-grid">
-                {visibleProjects.map(project => (
-                  <ProjectCard key={project.id} project={project} />
-                ))}
-              </div>
-            )}
-            <LoadMore />
-          </main>
-          <Footer {...footerProps} />
+              {visibleProjects.length === 0 ? (
+                <p className="lumiere-empty">{t('no_projects')}</p>
+              ) : (
+                <div className="lumiere-card-grid">
+                  {visibleProjects.map(project => (
+                    <ProjectCard key={project.id} project={project} />
+                  ))}
+                </div>
+              )}
+              <LoadMore />
+            </main>
+            <Footer {...footerProps} />
+          </div>
+          <CookieBanner />
         </div>
       </div>
-      <CookieBanner />
     </div>
   )
 }
diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
index 7a339134cd..1c8a423c7c 100644
--- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+++ b/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 ──────────────────────────────────────────────────────