fix(ux): allow tooltips to escape panel-header overflow + polish shadow

Browser-verified two issues with stage-311 tooltip rendering:

(1) Workspace panel header tooltips (NewFile, NewFolder, Refresh, etc.)
    were being clipped because .panel-header had overflow:hidden. The
    title span at `.panel-header > span:first-child` already has its own
    overflow:hidden + text-overflow:ellipsis for the workspace name
    truncation, so the parent doesn't need it. Changed .panel-header to
    overflow:visible — verified tooltip now floats correctly below the
    icon row, ellipsis on the title still works because the inner span
    handles it locally.

(2) Strengthened tooltip body styling per browser screenshot review:
    - Border: var(--border) (#2A2A45 dark slate) → var(--accent-bg-strong)
      (gold-tinted at 15% alpha). Subtle brand-tied edge that's slightly
      more visible against the very dark page background.
    - Shadow: 6px/20px / 0.55 alpha + 1px ring at 0.25 → 8px/24px / 0.65
      alpha + 1px ring at 0.35 + 1px inset highlight at 0.04 alpha. Gives
      the tooltip more elevation against the dark theme so it reads as a
      floating element rather than painted onto the background.

All 19 tooltip pytest checks still pass. Browser-verified on rail
(Tasks, Settings), composer (Attach files, Send message), and workspace
panel header (New folder) — screenshots delivered to maintainer for
visual sign-off.
This commit is contained in:
nesquena-hermes committed 2026-05-07 04:24:31 +00:00
1 parent 6dd133b1f7
commit 53ad5eccba
1 file changed
+2 -2
+2 -2
View File
@@ -656,7 +656,7 @@
and Linear's rail tooltips also skip the arrow. Spatial proximity (8px
gap) is enough to associate the tooltip with the trigger. */
.has-tooltip{position:relative;}
.has-tooltip::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:1500;box-shadow:0 6px 20px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.25);opacity:0;transition:opacity .14s ease;transition-delay:0s;}
.has-tooltip::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--surface);border:1px solid var(--accent-bg-strong);color:var(--text);font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:1500;box-shadow:0 8px 24px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.04) inset;opacity:0;transition:opacity .14s ease;transition-delay:0s;}
.has-tooltip:hover::after,.has-tooltip:focus-visible::after{opacity:1;transition-delay:.15s;}
/* For bottom-positioned tooltips (panel header buttons, non-rail elements) */
.has-tooltip--bottom::after{left:50%;top:auto;bottom:auto;transform:translateX(-50%);top:calc(100% + 8px);}
@@ -1131,7 +1131,7 @@
/* Collapse priority as the panel narrows: git-badge first, then "Workspace"
label, never the icon buttons. flex-shrink ratios give graceful ellipsis;
@container queries below cut to display:none at hard breakpoints. */
.panel-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:6px;overflow:hidden;}
.panel-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:6px;overflow:visible;}
.panel-header > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:2;}
.git-badge{font-size:9px;font-weight:600;color:var(--muted);background:var(--hover-bg);padding:2px 7px;border-radius:4px;letter-spacing:.02em;white-space:nowrap;font-family:'SF Mono',ui-monospace,monospace;flex-shrink:3;overflow:hidden;min-width:0;}
.topbar-source-badge{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--accent-bg);color:var(--accent-text);font-size:10px;font-weight:700;letter-spacing:.02em;vertical-align:middle;}