ui: move zoom picker next to section title, fix tooltip hover-stealing
Build and Deploy Verso / deploy (push) Successful in 14m18s
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:
+13
-11
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user