diff --git a/web/src/index.css b/web/src/index.css
index d6763cd..877a26e 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -10155,16 +10155,17 @@ html.login-page--paused .login-page__flare {
.bs-cmp-nav__item {
appearance: none;
display: grid;
- grid-template-columns: 8px minmax(0, 1fr) auto;
- gap: 8px;
- align-items: center;
+ grid-template-columns: 8px minmax(0, 1fr);
+ grid-template-rows: auto auto;
+ gap: 4px 8px;
+ align-items: start;
width: 100%;
text-align: left;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--bs-cmp-ink);
- padding: 7px 8px;
+ padding: 8px;
cursor: pointer;
line-height: 1.25;
}
@@ -10184,6 +10185,8 @@ html.login-page--paused .login-page__flare {
border-radius: 50%;
background: #64748b;
justify-self: center;
+ align-self: center;
+ grid-row: 1;
}
.bs-cmp-nav__item.is-clean .bs-cmp-nav__dot {
@@ -10201,17 +10204,38 @@ html.login-page--paused .login-page__flare {
text-overflow: ellipsis;
white-space: nowrap;
color: #e2e8f0;
+ grid-column: 2;
+ grid-row: 1;
+ align-self: center;
}
.bs-cmp-nav__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
- gap: 2px;
- font-size: 10px;
+ gap: 4px;
+ font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--bs-cmp-muted);
- line-height: 1.25;
+ line-height: 1.3;
+ grid-column: 2;
+ grid-row: 2;
+ min-width: 0;
+}
+
+.bs-cmp-nav__counts {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+}
+
+.bs-cmp-nav__counts > span {
+ flex: 0 0 auto;
+ white-space: nowrap;
+ padding: 1px 6px;
+ border-radius: 4px;
+ background: rgba(148, 163, 184, 0.12);
+ border: 1px solid rgba(148, 163, 184, 0.18);
}
.bs-cmp-nav__meta em {
@@ -10239,21 +10263,30 @@ html.login-page--paused .login-page__flare {
/* Run-level overview: never changes when switching sheets */
.bs-cmp-overview {
display: flex;
- flex-wrap: nowrap;
+ flex-wrap: wrap;
align-items: center;
- gap: 10px 14px;
+ gap: 8px 12px;
min-height: 34px;
- padding: 6px 12px;
+ padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--bs-cmp-border);
background: rgba(15, 23, 42, 0.45);
font-size: 12px;
font-variant-numeric: tabular-nums;
color: #cbd5e1;
- overflow: hidden;
+ overflow: visible;
flex: 0 0 auto;
}
+.bs-cmp-overview__stat {
+ flex: 0 0 auto;
+ white-space: nowrap;
+ padding: 2px 8px;
+ border-radius: 6px;
+ background: rgba(148, 163, 184, 0.1);
+ border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
.bs-cmp-overview.is-ok {
border-color: rgba(34, 197, 94, 0.28);
}
@@ -10299,12 +10332,12 @@ html.login-page--paused .login-page__flare {
white-space: nowrap;
}
-/* Sheet strip: fixed geometry so only digits/name swap */
+/* Sheet strip: sheet + kind filters laid out flat (full labels) */
.bs-cmp-strip {
- display: grid;
- grid-template-columns: minmax(140px, 1.2fr) 88px minmax(240px, 1.4fr) auto;
- gap: 10px 14px;
+ display: flex;
+ flex-wrap: wrap;
align-items: center;
+ gap: 10px 12px;
min-height: 48px;
padding: 8px 12px;
border-radius: 10px;
@@ -10326,6 +10359,7 @@ html.login-page--paused .login-page__flare {
align-items: center;
gap: 8px;
min-width: 0;
+ flex: 1 1 160px;
}
.bs-cmp-strip__sheet-tag {
@@ -10383,30 +10417,32 @@ html.login-page--paused .login-page__flare {
}
.bs-cmp-strip__kinds {
- display: grid;
- grid-template-columns: repeat(4, minmax(0, 1fr));
- gap: 4px;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 6px;
+ flex: 2 1 360px;
min-width: 0;
}
.bs-cmp-strip__kind {
appearance: none;
+ flex: 0 0 auto;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 6px;
background: rgba(15, 23, 42, 0.55);
color: #cbd5e1;
- padding: 4px 6px;
- font-size: 11px;
+ padding: 5px 10px;
+ font-size: 12px;
cursor: pointer;
- line-height: 1.3;
+ line-height: 1.35;
white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ overflow: visible;
}
.bs-cmp-strip__kind b {
font-variant-numeric: tabular-nums;
- margin-left: 2px;
+ margin-left: 4px;
display: inline-block;
min-width: 1.5ch;
}
@@ -10441,7 +10477,8 @@ html.login-page--paused .login-page__flare {
font-size: 11px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
- justify-self: end;
+ flex: 0 0 auto;
+ margin-left: auto;
}
.bs-cmp-top-fields {
@@ -10545,30 +10582,17 @@ html.login-page--paused .login-page__flare {
}
@media (max-width: 1100px) {
- .bs-cmp-strip {
- grid-template-columns: minmax(0, 1fr) auto;
- grid-template-rows: auto auto;
- }
-
- .bs-cmp-strip__pass {
- justify-self: end;
- }
-
.bs-cmp-strip__kinds {
- grid-column: 1 / -1;
+ flex: 1 1 100%;
}
.bs-cmp-strip__range {
- display: none;
- }
-
- .bs-cmp-overview {
- flex-wrap: wrap;
- row-gap: 4px;
+ margin-left: 0;
}
.bs-cmp-overview__time {
margin-left: 0;
+ flex-basis: 100%;
}
}
@@ -10643,12 +10667,14 @@ html.login-page--paused .login-page__flare {
color: #bbf7d0;
}
.bs-cmp-col-kind {
- width: 7.5rem;
- white-space: normal;
+ width: auto;
+ min-width: 4.5rem;
+ white-space: nowrap;
}
.bs-cmp-col-kind .bs-cmp-badge {
display: inline-block;
- margin: 0 4px 4px 0;
+ margin: 0;
+ white-space: nowrap;
}
.bs-cmp-col-fail,
.bs-cmp-fail-cell {
diff --git a/web/src/pages/network/BizComparePage.tsx b/web/src/pages/network/BizComparePage.tsx
index 302bcb9..2a945c1 100644
--- a/web/src/pages/network/BizComparePage.tsx
+++ b/web/src/pages/network/BizComparePage.tsx
@@ -2074,10 +2074,16 @@ export function BizComparePage() {
{dirty > 0 ? (
<>
{t("bizCompare.kindFail")}
-
- {t("bizCompare.missCount")} {Number(c.removed || 0)} ·{" "}
- {t("bizCompare.extraCount")} {Number(c.added || 0)} ·{" "}
- {t("bizCompare.mismatchCount")} {Number(c.changed || 0)}
+
+
+ {t("bizCompare.missCount")} {Number(c.removed || 0)}
+
+
+ {t("bizCompare.extraCount")} {Number(c.added || 0)}
+
+
+ {t("bizCompare.mismatchCount")} {Number(c.changed || 0)}
+
) : (