From 72c62aec4570450295b0d874910dc893b7de10a2 Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Mon, 8 Jun 2026 11:29:00 -0700
Subject: [PATCH] CSS: fix dashboard hover-flicker (#816), Automations tile
 clutter (#816), and onboarding badge overlap (#817)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#816 hover-flicker — .dash-card:hover and .qa-tile:hover both did
transform: translateY(-Npx). Hovering a card's bottom edge lifted it off the
cursor → un-hover → drop → re-hover, an infinite rapid loop. Since every
dashboard card is a .dash-card, all of them flickered ("all elements
affected"). Removed the translateY lift; the hover's stronger shadow + border
glow already reads as "raised" without moving the hit box. (qa-tile has
overflow:hidden so a pseudo-element gap-buffer can't help — removal is the
clean, consistent fix.)

#816 Automations "looks strange" — the .qa-tile__flow decoration sits in the
bottom row directly behind the green "Open →" CTA; at 0.45 opacity the accent
nodes/line competed with the CTA (green-on-green clutter). Toned to 0.22 so it
reads as faint background texture; still brightens on hover.

#817 badge overlap — .helper-first-launch-tip was right:84px, only ~4px clear
of the ? float button's 8px pulse ring (button left edge ~72px from right), so
the "New here?" tip touched the button. Moved to right:96px.

CSS values/comments only — no structural changes (brace delta unchanged).
---
 webui/static/style.css | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/webui/static/style.css b/webui/static/style.css
index b78855dc..cc22d3b2 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -2673,7 +2673,10 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 .helper-first-launch-tip {
     position: fixed;
     bottom: 34px;
-    right: 84px;
+    /* Clear the ? float button (right:24 + 48 wide → left edge ~72px from the
+       right) AND its 8px pulse ring, with margin, so the tip never covers the
+       button (#817). Was 84px — only ~4px off the pulse ring, so they touched. */
+    right: 96px;
     padding: 8px 16px;
     background: rgba(16, 16, 16, 0.95);
     border: 1px solid rgba(var(--accent-rgb), 0.3);
@@ -61935,7 +61938,10 @@ body.reduce-effects .dash-card::after {
 }
 .dash-card:hover {
     border-color: rgba(var(--accent-rgb), 0.35);
-    transform: translateY(-3px);
+    /* No translateY lift: moving the card up on hover pulls its bottom edge off
+       the cursor when you hover that edge, which un-hovers → drops → re-hovers
+       in a rapid flicker loop (#816). The stronger shadow + glow below already
+       reads as "raised" without moving the hit box. */
     box-shadow:
         0 12px 40px rgba(0, 0, 0, 0.40),
         0 4px 14px rgba(0, 0, 0, 0.22),
@@ -62137,7 +62143,9 @@ body.reduce-effects .dash-card::after {
 
 .qa-tile:hover,
 .qa-tile:focus-visible {
-    transform: translateY(-2px);
+    /* No translateY lift — see .dash-card:hover (#816 hover-flicker). overflow
+       is hidden here so a pseudo-element gap-buffer can't help; the glow/shadow
+       below carries the hover state. */
     border-color: rgba(var(--accent-rgb), 0.32);
     box-shadow:
         0 16px 40px rgba(0, 0, 0, 0.5),
@@ -62310,7 +62318,11 @@ body.reduce-effects .dash-card::after {
     align-items: center;
     justify-content: space-between;
     gap: clamp(4px, 0.5cqw, 8px);
-    opacity: 0.45;
+    /* The flow sits in the bottom row, directly behind the green "Open →" CTA —
+       at 0.45 the accent nodes/line competed with the CTA and read as clutter
+       (#816 "automations looks a bit strange"). Toned to a faint background
+       texture; it still brightens on hover. */
+    opacity: 0.22;
     transition: opacity 0.35s ease;
 }