Z/trumpsignal-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: navbar sticky, composite card styling, needle clip

Browse Source 
- overflow-x: clip on html/body (was `hidden`, which silently made body a
  scroll container and broke position:sticky on the navbar)
- .macro-composite: card style matching indicator cards (14px margin,
  border + 12px radius + surface bg + shadow-1, no more full-bleed band)
- .macro-composite-track: remove overflow:hidden so 24px needle isn't
  clipped by 18px track; add 6px vertical margin for breathing room

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
k
2026-05-27 16:18:14 +08:00
parent 02b2aebbb7
commit 8ab7c55288
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/globals.css
+17 -5
View File
@@ -905,9 +905,16 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active {
} }
.macro-composite { .macro-composite {
border-top: 1px solid var(--line); /* Aligned to the indicator-card grid above (.macro-grid uses 14px gutters
and metric cards have 12px radius / 1px border / surface bg). The
composite reads as a "summary card" sitting at the same indent as the
metric cards rather than a full-bleed banner. */
margin: 14px;
padding: 20px 22px 22px; padding: 20px 22px 22px;
background: var(--bg-sunk); background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: var(--shadow-1);
} }
.macro-composite-head { .macro-composite-head {
@@ -956,10 +963,13 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active {
.macro-composite-track { .macro-composite-track {
position: relative; position: relative;
height: 18px; height: 18px;
overflow: hidden; /* No `overflow: hidden` — the 24px needle is taller than the track and
gets clipped top/bottom otherwise. The gradient is naturally rounded
by border-radius, so clipping isn't needed. */
border-radius: 999px; border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--line) 78%, transparent); border: 1px solid color-mix(in oklab, var(--line) 78%, transparent);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.08); box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
margin: 6px 0;
} }
.macro-composite-track::after { .macro-composite-track::after {
@@ -2751,8 +2761,10 @@ html[data-theme="dark"] .ai-reasoning-card {
.connect-btn.lg { padding: 8px 10px; font-size: 12px; } .connect-btn.lg { padding: 8px 10px; font-size: 12px; }
} }
/* Global safety: no page-level horizontal scroll */ /* Global safety: no page-level horizontal scroll.
html, body { max-width: 100%; overflow-x: hidden; } Use `overflow-x: clip` (not `hidden`) — `hidden` turns body into a scroll
container, which silently breaks `position: sticky` on the navbar. */
html, body { max-width: 100%; overflow-x: clip; }
/* Misc utilities */ /* Misc utilities */
.stack { display: flex; flex-direction: column; } .stack { display: flex; flex-direction: column; }