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

Improve biz_state monitor-item table UX with select-all and visible scroll.

Browse source 
Keep the horizontal scrollbar in the viewport, sticky enable/title columns, and show selected/total (and unbound) counts.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-09-23 11:40:01 +08:00
parent a1acd4c2af
commit 86fcb98218
4 changed files with 193 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

94
web/src/index.css
View file

@ -11396,13 +11396,35 @@ html.login-page--paused .login-page__flare {
margin-bottom: 4px;
}
.bs-profiles-panel {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
flex: 1 1 auto;
max-height: min(62vh, 620px);
}
.bs-profiles-toolbar {
flex: 0 0 auto;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.bs-profiles-stats {
font-size: 12px;
white-space: nowrap;
}
.bs-profiles-table-wrap {
overflow-x: scroll !important;
overflow-y: auto !important;
max-height: min(58vh, 560px);
flex: 1 1 auto;
min-height: 0;
overflow: auto !important;
max-height: none;
max-width: 100%;
/* Keep horizontal scrollbar gutter visible. */
scrollbar-gutter: stable;
/* Always reserve room for both scrollbars so H-bar stays in the visible viewport. */
scrollbar-gutter: stable both-edges;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.65) rgba(15, 23, 42, 0.9);
}
@ -11428,8 +11450,8 @@ html.login-page--paused .login-page__flare {
}
.bs-profiles-table {
width: 100%;
min-width: 1180px;
width: max-content;
min-width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
@ -11443,9 +11465,10 @@ html.login-page--paused .login-page__flare {
box-shadow: 0 1px 0 rgba(148, 163, 184, 0.25);
}
/* enable | title | lane | actions | params | command | aux */
.bs-profiles-table th:nth-child(1),
.bs-profiles-table td:nth-child(1) {
width: 48px;
width: 52px;
}
.bs-profiles-table th:nth-child(2),
@ -11455,22 +11478,53 @@ html.login-page--paused .login-page__flare {
.bs-profiles-table th:nth-child(3),
.bs-profiles-table td:nth-child(3) {
width: 200px;
width: 88px;
}
.bs-profiles-table th:nth-child(4),
.bs-profiles-table td:nth-child(4) {
width: 100px;
width: 120px;
}
.bs-profiles-table th:nth-child(5),
.bs-profiles-table td:nth-child(5) {
width: 280px;
width: 200px;
}
.bs-profiles-table th:nth-child(6),
.bs-profiles-table td:nth-child(6) {
width: auto;
width: 360px;
}
.bs-profiles-table th:nth-child(7),
.bs-profiles-table td:nth-child(7) {
width: 280px;
}
.bs-profiles-sticky-col {
position: sticky;
z-index: 2;
background: rgba(15, 23, 42, 0.97);
}
.bs-profiles-table thead .bs-profiles-sticky-col,
.bs-profiles-table thead th:nth-child(1),
.bs-profiles-table thead th:nth-child(2) {
z-index: 4;
}
.bs-profiles-sticky-col--1,
.bs-profiles-table th:nth-child(1),
.bs-profiles-table td.bs-profiles-sticky-col--1 {
left: 0;
box-shadow: 1px 0 0 rgba(148, 163, 184, 0.2);
}
.bs-profiles-sticky-col--2,
.bs-profiles-table th:nth-child(2),
.bs-profiles-table td.bs-profiles-sticky-col--2 {
left: 52px;
box-shadow: 1px 0 0 rgba(148, 163, 184, 0.2);
}
.bs-profiles-table .bs-cmd-cell {
@ -14450,17 +14504,23 @@ option {
white-space: nowrap;
}
/* Biz-state profiles: keep wide table + visible H-scroll (overrides modal fill rules). */
/* Biz-state profiles: keep wide table + H-scroll inside a fixed viewport. */
.app-heroui-modal__dialog [data-slot="modal-body"] > .bs-profiles-panel,
.app-heroui-modal__dialog .modal__body > .bs-profiles-panel {
flex-shrink: 1;
min-height: 0;
}
.app-heroui-modal .pt-list-table-wrap.bs-profiles-table-wrap {
overflow-x: scroll !important;
overflow-y: auto !important;
overflow: auto !important;
max-width: 100%;
width: 100%;
max-height: none;
}
.app-heroui-modal .pt-list-table.bs-profiles-table {
width: 100% !important;
min-width: 960px !important;
width: max-content !important;
min-width: 100% !important;
table-layout: fixed !important;
}