From 36f8ec80fdd1af1e08b1c24b943259d7305a3754 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Fri, 29 May 2026 23:51:39 -0400 Subject: [PATCH] =?UTF-8?q?fix(ui):=20tooltip=20override=20needs=20!import?= =?UTF-8?q?ant=20=E2=80=94=20Vite=20reorders=20CSS=20chunks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- frontend/src/styles/app.css | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 55b13a4..fa32dd1 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -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); }