ui: move zoom picker next to section title, fix tooltip hover-stealing
Build and Deploy Verso / deploy (push) Successful in 14m18s

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>
This commit is contained in:
claude
2026-06-12 20:09:48 +00:00
parent be529e53f6
commit 4ca6ec2b58
2 changed files with 30 additions and 15 deletions
@@ -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
@@ -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.