hansjone/netx
1
0
Fork 0
mirror of https://github.com/hansjone/netx.git synced 2026-10-08 23:33:21 +08:00
Code Issues Projects Releases 1 Packages Wiki Activity Actions 2

Fix compare board kind labels being clipped to one character.

Browse source 
Lay out miss/extra/mismatch filters and stats as wrapping chips instead of a cramped 88px grid column.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-09-18 01:41:00 +08:00
parent d232044750
commit 157188bd3e
2 changed files with 80 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

114
web/src/index.css
View file

@ -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 {

14
web/src/pages/network/BizComparePage.tsx
View file

@ -2074,10 +2074,16 @@ export function BizComparePage() {
{dirty > 0 ? (
<>
<em className="bs-cmp-nav__fail">{t("bizCompare.kindFail")}</em>
<span>
{t("bizCompare.missCount")} {Number(c.removed || 0)} ·{" "}
{t("bizCompare.extraCount")} {Number(c.added || 0)} ·{" "}
{t("bizCompare.mismatchCount")} {Number(c.changed || 0)}
<span className="bs-cmp-nav__counts">
<span>
{t("bizCompare.missCount")} {Number(c.removed || 0)}
</span>
<span>
{t("bizCompare.extraCount")} {Number(c.added || 0)}
</span>
<span>
{t("bizCompare.mismatchCount")} {Number(c.changed || 0)}
</span>
</span>
</>
) : (