From 45a49d64a237b75ec4f818936c7ae202ed2b07de Mon Sep 17 00:00:00 2001 From: Bob Date: Mon, 6 Jul 2026 23:19:38 +0800 Subject: [PATCH] fix(viewer): cap content width, hug warnings, fill heat cells Widescreen tweaks to the viewer SPA: cap the data column at 1440px and center it so it does not stretch edge-to-edge; size warning banners to their text instead of full width; and let heat cells fill their table cell (td padding removed, color carries its own text inset) so a row reads as a continuous heatmap instead of floating rounded bars with white gaps. Rebuilt web/dist. --- .../viewer/web/dist/assets/index-BUvcEvK9.css | 1 + .../{index-CrcprNJt.js => index-FSuUD3On.js} | 0 .../viewer/web/dist/assets/index-oJgoOLVs.css | 1 - internal/viewer/web/dist/index.html | 4 ++-- internal/viewer/web/src/styles.css | 19 +++++++++++++++---- 5 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 internal/viewer/web/dist/assets/index-BUvcEvK9.css rename internal/viewer/web/dist/assets/{index-CrcprNJt.js => index-FSuUD3On.js} (100%) delete mode 100644 internal/viewer/web/dist/assets/index-oJgoOLVs.css diff --git a/internal/viewer/web/dist/assets/index-BUvcEvK9.css b/internal/viewer/web/dist/assets/index-BUvcEvK9.css new file mode 100644 index 0000000..f56beeb --- /dev/null +++ b/internal/viewer/web/dist/assets/index-BUvcEvK9.css @@ -0,0 +1 @@ +:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--bg: #f5f6f7;--panel: #ffffff;--ink: #1f2428;--muted: #66717d;--line: #d8dde2;--line-strong: #bcc5cd;--good: #176b5b;--warn: #906312;--bad: #a33a36;--blue: #315f97}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--ink)}button{font:inherit}.app{min-height:100vh;display:grid;grid-template-rows:auto 1fr}.app-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px 10px;border-bottom:1px solid var(--line);background:var(--panel)}h1,h2{margin:0;letter-spacing:0}h1{font-size:18px;line-height:1.2}h2{font-size:15px;line-height:1.25}p{margin:4px 0 0;color:var(--muted);font-size:12px}.run-chip{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px}.run-chip span,.status{padding:2px 7px;border:1px solid var(--line);border-radius:999px;background:#f9fafb;color:var(--muted);white-space:nowrap}.run-chip strong{max-width:44vw;overflow:hidden;color:var(--ink);font-weight:650;text-overflow:ellipsis;white-space:nowrap}.tabs-root{min-width:0}.tabs-list{display:flex;gap:6px;padding:8px 10px 0;overflow-x:auto;border-bottom:1px solid var(--line);background:var(--panel)}.tab-trigger{display:grid;gap:2px;min-width:180px;max-width:280px;padding:8px 10px 9px;border:1px solid transparent;border-bottom:0;border-radius:7px 7px 0 0;background:transparent;color:var(--muted);text-align:left;cursor:pointer}.tab-trigger span,.tab-trigger small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-trigger span{color:var(--ink);font-size:13px;font-weight:650}.tab-trigger small{font-size:11px}.tab-trigger[data-state=active]{position:relative;top:1px;background:var(--bg);border-color:var(--line)}.tab-trigger[data-state=active] span{color:var(--blue)}.tab-content{padding:10px;max-width:1440px;margin-inline:auto}.report-view,.table-stack{display:grid;gap:10px}.summary-strip,.table-panel{border:1px solid var(--line);border-radius:7px;background:var(--panel)}.summary-strip{padding:10px}.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}.meta-item,.shape{display:grid;gap:2px;min-width:0}.meta-item span,.shape span{color:var(--muted);font-size:11px}.meta-item strong,.shape strong{overflow:hidden;font-size:12px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.table-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:10px 12px;border-bottom:1px solid var(--line)}.subline{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px;color:var(--muted);font-size:12px}.shape-grid{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:12px;min-width:min(460px,50vw)}.warning{width:fit-content;max-width:100%;margin-bottom:10px;padding:8px 10px;border:1px solid #dec777;border-radius:6px;background:#fff8d9;color:#6f4e09;font-size:12px}.warning.compact{margin:10px 12px 0}.status-active_verified{border-color:#9bc7bc;color:var(--good)}.status-capacity,.status-legacy_unverified,.status-mixed,.status-unverified{border-color:#dec777;color:var(--warn)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{padding:7px 8px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:middle}th{color:#46515d;font-size:11px;font-weight:700;text-align:right;white-space:normal}th:first-child,td:first-child{text-align:right;width:58px}td{text-align:right}tbody tr:hover{background:#f9fafb}.num{font-variant-numeric:tabular-nums}.strong{font-weight:700}.muted{color:var(--muted)}td:has(.metric-trigger){padding:0}.metric-trigger{all:unset;display:block;box-sizing:border-box;width:100%;padding:7px 8px;cursor:help}.metric-trigger:focus{outline:2px solid #6b95c6;outline-offset:1px}.heat-neutral{background:transparent}.heat-0{background:#f5d1ce}.heat-1{background:#f5e0d0}.heat-2{background:#f3ecd7}.heat-3{background:#e4efd9}.heat-4{background:#cde7d8}.heat-5{background:#add8c2}.popover{z-index:20;width:min(520px,calc(100vw - 24px));max-height:min(520px,calc(100vh - 24px));overflow:auto;padding:10px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;box-shadow:0 16px 40px #1a20262e;font-size:12px}.detail-grid{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 10px}.detail-grid span,.code-block span,.detail-muted{color:var(--muted)}.detail-grid strong{min-width:0;overflow-wrap:anywhere;font-weight:650}.code-block{display:grid;gap:4px;margin-top:10px}.code-block code{display:block;max-height:130px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:5px;background:#f7f8f9;color:#22272e;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;line-height:1.35;white-space:pre-wrap}.app-message{margin:20px;color:var(--muted);font-size:13px}.app-message.error{color:var(--bad)}@media(max-width:780px){.app-head,.table-head{align-items:stretch;flex-direction:column}.run-chip strong{max-width:82vw}.shape-grid{grid-template-columns:1fr;min-width:0}th,td{padding:6px;font-size:11px}} diff --git a/internal/viewer/web/dist/assets/index-CrcprNJt.js b/internal/viewer/web/dist/assets/index-FSuUD3On.js similarity index 100% rename from internal/viewer/web/dist/assets/index-CrcprNJt.js rename to internal/viewer/web/dist/assets/index-FSuUD3On.js diff --git a/internal/viewer/web/dist/assets/index-oJgoOLVs.css b/internal/viewer/web/dist/assets/index-oJgoOLVs.css deleted file mode 100644 index 02f63db..0000000 --- a/internal/viewer/web/dist/assets/index-oJgoOLVs.css +++ /dev/null @@ -1 +0,0 @@ -:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--bg: #f5f6f7;--panel: #ffffff;--ink: #1f2428;--muted: #66717d;--line: #d8dde2;--line-strong: #bcc5cd;--good: #176b5b;--warn: #906312;--bad: #a33a36;--blue: #315f97}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--ink)}button{font:inherit}.app{min-height:100vh;display:grid;grid-template-rows:auto 1fr}.app-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px 10px;border-bottom:1px solid var(--line);background:var(--panel)}h1,h2{margin:0;letter-spacing:0}h1{font-size:18px;line-height:1.2}h2{font-size:15px;line-height:1.25}p{margin:4px 0 0;color:var(--muted);font-size:12px}.run-chip{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px}.run-chip span,.status{padding:2px 7px;border:1px solid var(--line);border-radius:999px;background:#f9fafb;color:var(--muted);white-space:nowrap}.run-chip strong{max-width:44vw;overflow:hidden;color:var(--ink);font-weight:650;text-overflow:ellipsis;white-space:nowrap}.tabs-root{min-width:0}.tabs-list{display:flex;gap:6px;padding:8px 10px 0;overflow-x:auto;border-bottom:1px solid var(--line);background:var(--panel)}.tab-trigger{display:grid;gap:2px;min-width:180px;max-width:280px;padding:8px 10px 9px;border:1px solid transparent;border-bottom:0;border-radius:7px 7px 0 0;background:transparent;color:var(--muted);text-align:left;cursor:pointer}.tab-trigger span,.tab-trigger small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-trigger span{color:var(--ink);font-size:13px;font-weight:650}.tab-trigger small{font-size:11px}.tab-trigger[data-state=active]{position:relative;top:1px;background:var(--bg);border-color:var(--line)}.tab-trigger[data-state=active] span{color:var(--blue)}.tab-content{padding:10px}.report-view,.table-stack{display:grid;gap:10px}.summary-strip,.table-panel{border:1px solid var(--line);border-radius:7px;background:var(--panel)}.summary-strip{padding:10px}.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}.meta-item,.shape{display:grid;gap:2px;min-width:0}.meta-item span,.shape span{color:var(--muted);font-size:11px}.meta-item strong,.shape strong{overflow:hidden;font-size:12px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.table-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:10px 12px;border-bottom:1px solid var(--line)}.subline{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px;color:var(--muted);font-size:12px}.shape-grid{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:12px;min-width:min(460px,50vw)}.warning{margin-bottom:10px;padding:8px 10px;border:1px solid #dec777;border-radius:6px;background:#fff8d9;color:#6f4e09;font-size:12px}.warning.compact{margin:10px 12px 0}.status-active_verified{border-color:#9bc7bc;color:var(--good)}.status-capacity,.status-legacy_unverified,.status-mixed,.status-unverified{border-color:#dec777;color:var(--warn)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{padding:7px 8px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:middle}th{color:#46515d;font-size:11px;font-weight:700;text-align:right;white-space:normal}th:first-child,td:first-child{text-align:right;width:58px}td{text-align:right}tbody tr:hover{background:#f9fafb}.num{font-variant-numeric:tabular-nums}.strong{font-weight:700}.muted{color:var(--muted)}.metric-trigger{all:unset;display:inline-block;min-width:100%;padding:1px 3px;border-radius:4px;cursor:help}.metric-trigger:focus{outline:2px solid #6b95c6;outline-offset:1px}.heat-neutral{background:transparent}.heat-0{background:#f5d1ce}.heat-1{background:#f5e0d0}.heat-2{background:#f3ecd7}.heat-3{background:#e4efd9}.heat-4{background:#cde7d8}.heat-5{background:#add8c2}.popover{z-index:20;width:min(520px,calc(100vw - 24px));max-height:min(520px,calc(100vh - 24px));overflow:auto;padding:10px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;box-shadow:0 16px 40px #1a20262e;font-size:12px}.detail-grid{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 10px}.detail-grid span,.code-block span,.detail-muted{color:var(--muted)}.detail-grid strong{min-width:0;overflow-wrap:anywhere;font-weight:650}.code-block{display:grid;gap:4px;margin-top:10px}.code-block code{display:block;max-height:130px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:5px;background:#f7f8f9;color:#22272e;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;line-height:1.35;white-space:pre-wrap}.app-message{margin:20px;color:var(--muted);font-size:13px}.app-message.error{color:var(--bad)}@media(max-width:780px){.app-head,.table-head{align-items:stretch;flex-direction:column}.run-chip strong{max-width:82vw}.shape-grid{grid-template-columns:1fr;min-width:0}th,td{padding:6px;font-size:11px}} diff --git a/internal/viewer/web/dist/index.html b/internal/viewer/web/dist/index.html index 0610a45..fb31827 100644 --- a/internal/viewer/web/dist/index.html +++ b/internal/viewer/web/dist/index.html @@ -4,8 +4,8 @@ localperf viewer - - + +
diff --git a/internal/viewer/web/src/styles.css b/internal/viewer/web/src/styles.css index 236a40f..930fd5a 100644 --- a/internal/viewer/web/src/styles.css +++ b/internal/viewer/web/src/styles.css @@ -151,6 +151,8 @@ p { .tab-content { padding: 10px; + max-width: 1440px; + margin-inline: auto; } .report-view, @@ -224,6 +226,8 @@ p { } .warning { + width: fit-content; + max-width: 100%; margin-bottom: 10px; padding: 8px 10px; border: 1px solid #dec777; @@ -302,12 +306,19 @@ tbody tr:hover { color: var(--muted); } +/* Heat cells fill their whole table cell: the td contributes no padding, and + the colored trigger carries the text inset itself, so adjacent colored + cells are contiguous instead of floating with white gaps around them. */ +td:has(.metric-trigger) { + padding: 0; +} + .metric-trigger { all: unset; - display: inline-block; - min-width: 100%; - padding: 1px 3px; - border-radius: 4px; + display: block; + box-sizing: border-box; + width: 100%; + padding: 7px 8px; cursor: help; }