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

ui: tighten dashboard copy and fix layout issues

Browse Source
This commit is contained in:
k
2026-06-14 21:58:56 +08:00
parent 4c3c8c6f87
commit 8534d90589
19 changed files with 1036 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/globals.css
+52 -6
View File
@@ -723,6 +723,34 @@ html[data-theme="dark"] .infotip-bubble {
min-height: 66px;
}
/* Hero variant — for a section with a SINGLE headline card (Valuation/AHR999).
The stacked card layout stretched full-width left a huge dead middle; the
hero lays out horizontally: value block left, summary + chips filling the
middle, chart button right. Wraps back to stacked on narrow screens. */
.macro-metric-card.hero {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: clamp(16px, 3vw, 40px);
min-height: 0;
}
.macro-metric-card.hero .macro-hero-body {
flex: 1 1 300px;
min-width: 0;
}
.macro-metric-card.hero .macro-summary {
margin-top: 0;
min-height: 0;
}
.macro-metric-card.hero .macro-thresholds {
margin-top: 10px;
}
.macro-metric-card.hero .macro-actions {
margin-top: 0;
padding-top: 0;
flex-shrink: 0;
}
.macro-thresholds {
display: flex;
flex-wrap: wrap;
@@ -1066,22 +1094,24 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active {
opacity: 1;
transform: translateY(0);
}
/* Placement variants (default = top) */
/* Placement variants (default = top).
--tip-shift is set by InfoTip.tsx on reveal: it nudges a bubble that would
hang past the viewport edge back on-screen (icons near the screen margin). */
.infotip-top .infotip-bubble {
bottom: calc(100% + 8px);
left: 50%; transform: translate(-50%, 2px);
left: 50%; transform: translate(calc(-50% + var(--tip-shift, 0px)), 2px);
}
.infotip-top:hover .infotip-bubble,
.infotip-top:focus-visible .infotip-bubble {
transform: translate(-50%, 0);
transform: translate(calc(-50% + var(--tip-shift, 0px)), 0);
}
.infotip-bottom .infotip-bubble {
top: calc(100% + 8px);
left: 50%; transform: translate(-50%, -2px);
left: 50%; transform: translate(calc(-50% + var(--tip-shift, 0px)), -2px);
}
.infotip-bottom:hover .infotip-bubble,
.infotip-bottom:focus-visible .infotip-bubble {
transform: translate(-50%, 0);
transform: translate(calc(-50% + var(--tip-shift, 0px)), 0);
}
.infotip-left .infotip-bubble {
right: calc(100% + 8px);
@@ -1562,6 +1592,10 @@ html[data-theme="dark"] .chip.down { color: oklch(80% 0.16 27); }
gap: 20px;
align-items: start;
}
/* Grid items default to min-width:auto, so an intrinsically-wide child (the
lightweight-charts canvas, a long URL) blows the column past the viewport
on phones — the whole page then scrolls sideways. Let columns shrink. */
.dash-grid > * { min-width: 0; }
.hero-value {
font-size: 44px;
@@ -2308,9 +2342,13 @@ html[data-theme="dark"] .post-row.signal-short {
.src-ico.whale { background: oklch(94% 0.08 150); color: oklch(40% 0.15 150); font-size: 13px; }
.src-ico.manual { background: oklch(94% 0.05 60); color: oklch(45% 0.15 60); font-size: 13px; }
.src-ico.external { background: var(--bg-sunk); color: var(--ink-2); }
/* min-width:0 — without it a long unbreakable URL in the text widens the 1fr
grid column past the card and the right edge (meta tag included) is clipped. */
.post-body { min-width: 0; }
.post-body .meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 6px;
font-size: 12px;
@@ -2321,6 +2359,7 @@ html[data-theme="dark"] .post-row.signal-short {
line-height: 1.5;
color: var(--ink);
margin: 0 0 10px;
overflow-wrap: anywhere;
}
.post-aside {
display: flex;
@@ -2812,8 +2851,15 @@ html[data-theme="dark"] .post-row.signal-short {
CSS-hover-only tooltips require). */
.infotip:active .infotip-bubble {
opacity: 1;
transform: none;
}
/* Keep the viewport-clamp shift on tap — `transform: none` here used to
discard it and re-centre the bubble off-screen. */
.infotip-top:active .infotip-bubble,
.infotip-bottom:active .infotip-bubble {
transform: translate(calc(-50% + var(--tip-shift, 0px)), 0);
}
.infotip-left:active .infotip-bubble { transform: translate(0, -50%); }
.infotip-right:active .infotip-bubble { transform: translate(0, -50%); }
.macro-action-label {
font-size: 12px;