From 4ca6ec2b58122fc528e53ce1e6557e45f4f7c7bc Mon Sep 17 00:00:00 2001
From: claude <claude@verso>
Date: Fri, 12 Jun 2026 20:09:48 +0000
Subject: [PATCH] ui: move zoom picker next to section title, fix tooltip
 hover-stealing

S/M/L buttons now appear inline with the page title rather than in the
action bar. Bootstrap tooltips get pointer-events:none so they can no
longer steal :hover from the card beneath them, preventing the lift
animation from flickering when hovering over tag dots.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/project-list-lumiere.tsx       | 24 ++++++++++---------
 .../pages/project-list-lumiere.scss           | 21 ++++++++++++----
 2 files changed, 30 insertions(+), 15 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 e76c6ba989..57a9505610 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
@@ -233,19 +233,13 @@ export function ProjectListLumiere() {
               <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="lumiere-title-row">
+                  <ProjectListTitle
                     filter={filter}
                     selectedTag={selectedTag}
+                    selectedTagId={selectedTagId}
+                    className="lumiere-title"
+                    id="lumiere-title"
                   />
                   <div
                     className="lumiere-zoom-control"
@@ -264,6 +258,14 @@ export function ProjectListLumiere() {
                       </button>
                     ))}
                   </div>
+                </div>
+                <div className="lumiere-header-actions">
+                  <SearchForm
+                    inputValue={searchText}
+                    setInputValue={setSearchText}
+                    filter={filter}
+                    selectedTag={selectedTag}
+                  />
                   <NewProjectButton
                     id="lumiere-new-project-button"
                     showAddAffiliationWidget
diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
index d5b2aca660..4fee529097 100644
--- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
@@ -318,10 +318,16 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
 
   .lumiere-header {
     display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
+    flex-direction: column;
+    gap: 0.75rem;
     margin-bottom: 1.75rem;
+  }
+
+  // Title + zoom control on the same row
+  .lumiere-title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
     flex-wrap: wrap;
   }
 
@@ -329,7 +335,6 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    flex-shrink: 0;
     flex-wrap: wrap;
   }
 
@@ -760,6 +765,14 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
   }
 }
 
+// ── Tooltip — prevent hover-stealing from card lift animation ─────────────────
+// Bootstrap tooltips are purely informational. pointer-events: none ensures
+// they never steal :hover from the card beneath them (which would cause the
+// translateY lift to flicker when hovering over a tag dot).
+.tooltip {
+  pointer-events: none;
+}
+
 // ── Footer — Lumière override ─────────────────────────────────────────────────
 // Pale teal canvas with noise grain, 2px teal→blue accent stripe at top.
 // Left col: serif author credit. Right col: monospace/uppercase meta links.