bvandeusen/FabledCurator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 33 Wiki Activity

fix(ui): tooltip override needs !important — Vite reorders CSS chunks

Browse Source 
104cac5's override sits at the same specificity as Vuetify's default
(`.v-tooltip > .v-overlay__content` on both sides). The fix relied on
source order — app.css imported after vuetify/styles in main.js — but
Vite's production bundler reorders node_modules CSS into the final
stylesheet unpredictably, so source order isn't a reliable winner.

!important on the two contrast properties (background + color) forces
the slate-on-parchment pair regardless of stylesheet load order. The
cosmetic border + shadow don't need it (Vuetify doesn't set them, so
nothing's competing).

Operator re-flagged 2026-05-29: tooltips still rendered light-on-light
on the deployed :latest after PR #33 — 104cac5 was in the bundle but
not winning. Also updated the file header so the source-order claim
isn't carried forward as gospel.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-05-29 23:51:39 -04:00
parent e35fb1edf7
commit 36f8ec80fd
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/app.css
+17 -5
View File
@@ -1,5 +1,8 @@
/* App-global overrides. Imported in main.js AFTER 'vuetify/styles' so
these win on equal selector specificity by source order. */
/* App-global overrides. Imported in main.js after 'vuetify/styles', but
Vite's production bundler reorders CSS chunks so source order is not a
reliable winner against node_modules CSS at equal specificity. Rules
here either out-specify Vuetify's default or use !important on the
exact properties that need to win. */
/* Tooltip readability fix (operator-flagged 2026-05-28).
Vuetify's default v-tooltip pairs `on-surface-variant` TEXT with an
@@ -12,10 +15,19 @@
Tooltips want the inverse of muted body text — a dark, slightly
elevated panel with the HIGH-contrast parchment text. Fixing it here
(not by changing on-surface-variant) keeps captions/empty-states
correct while making every tooltip in the app legible. */
correct while making every tooltip in the app legible.
`!important` on the contrast properties: this rule ties Vuetify's
default at specificity (.v-tooltip > .v-overlay__content), and in a
Vite production build the node_modules CSS can land after app.css in
the final stylesheet regardless of import order, so source-order wins
aren't reliable. !important removes that fragility for the two
properties whose drift made tooltips unreadable; the cosmetic border
and shadow don't need it (Vuetify doesn't set them). Operator
re-flagged 2026-05-29 on the deployed :latest after PR #33. */
.v-tooltip > .v-overlay__content {
background: rgb(var(--v-theme-surface-bright)); /* slate #2C313A */
color: rgb(var(--v-theme-on-surface)); /* parchment #E8E4D8 */
background: rgb(var(--v-theme-surface-bright)) !important; /* slate #2C313A */
color: rgb(var(--v-theme-on-surface)) !important; /* parchment #E8E4D8 */
border: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.25);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}