From 2dd7c423f16b204120ab48c04f1717d0b9822f1f Mon Sep 17 00:00:00 2001 From: Bob Date: Mon, 6 Jul 2026 23:32:27 +0800 Subject: [PATCH] fix(viewer): stop the engine-mismatch warning stretching full-height on load MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The .app grid used 'grid-template-rows: auto 1fr', but the engine-mismatch warning is a third grid child — it landed in the 1fr row and, with grid's default align-items: stretch, the banner filled the whole viewport height during initial load before the tab content settled. Switch .app to a flex column and let .tabs-root grow (flex: 1) so the warning stays auto-height and the content area fills the space instead. Rebuilt web/dist. --- internal/viewer/web/dist/assets/index-BUvcEvK9.css | 1 - .../web/dist/assets/{index-FSuUD3On.js => index-D5fpXmWi.js} | 0 internal/viewer/web/dist/assets/index-vqFI0PY4.css | 1 + internal/viewer/web/dist/index.html | 4 ++-- internal/viewer/web/src/styles.css | 5 +++-- 5 files changed, 6 insertions(+), 5 deletions(-) delete mode 100644 internal/viewer/web/dist/assets/index-BUvcEvK9.css rename internal/viewer/web/dist/assets/{index-FSuUD3On.js => index-D5fpXmWi.js} (100%) create mode 100644 internal/viewer/web/dist/assets/index-vqFI0PY4.css diff --git a/internal/viewer/web/dist/assets/index-BUvcEvK9.css b/internal/viewer/web/dist/assets/index-BUvcEvK9.css deleted file mode 100644 index f56beeb..0000000 --- a/internal/viewer/web/dist/assets/index-BUvcEvK9.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;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-FSuUD3On.js b/internal/viewer/web/dist/assets/index-D5fpXmWi.js similarity index 100% rename from internal/viewer/web/dist/assets/index-FSuUD3On.js rename to internal/viewer/web/dist/assets/index-D5fpXmWi.js diff --git a/internal/viewer/web/dist/assets/index-vqFI0PY4.css b/internal/viewer/web/dist/assets/index-vqFI0PY4.css new file mode 100644 index 0000000..231431c --- /dev/null +++ b/internal/viewer/web/dist/assets/index-vqFI0PY4.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:flex;flex-direction:column}.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{flex:1;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/index.html b/internal/viewer/web/dist/index.html index fb31827..269b4c6 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 930fd5a..5116616 100644 --- a/internal/viewer/web/src/styles.css +++ b/internal/viewer/web/src/styles.css @@ -30,8 +30,8 @@ button { .app { min-height: 100vh; - display: grid; - grid-template-rows: auto 1fr; + display: flex; + flex-direction: column; } .app-head { @@ -94,6 +94,7 @@ p { } .tabs-root { + flex: 1; min-width: 0; }