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

Widen the topology Display panel into a two-column card.

Browse source 
Lay out toggles and color pickers side by side with a viewport-capped height so the menu no longer runs off-screen.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-08-05 09:36:14 +08:00
parent a412ca7cbc
commit 00926196f0
2 changed files with 26 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

29
web/src/index.css
View file

@ -6154,9 +6154,13 @@ pre {
left: 0;
z-index: 20;
display: grid;
gap: 6px;
min-width: 260px;
padding: 8px 10px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px 14px;
align-content: start;
width: min(560px, calc(100vw - 32px));
max-height: min(70vh, 520px);
overflow: auto;
padding: 10px 12px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 8px;
background: #0f172a;
@ -6198,9 +6202,10 @@ pre {
}
.topo-display-defaults {
grid-column: 1 / -1;
display: grid;
gap: 8px;
margin-top: 6px;
margin-top: 2px;
padding-top: 8px;
border-top: 1px solid rgba(148, 163, 184, 0.18);
}
@ -6212,6 +6217,7 @@ pre {
gap: 8px;
font-size: 12px;
color: #cbd5e1;
grid-column: 1 / -1;
}
.topo-display-defaults__row {
@ -6222,7 +6228,17 @@ pre {
}
.topo-display-defaults--canvas-bg .topo-display-defaults__row {
grid-template-columns: minmax(52px, auto) 28px minmax(88px, 1fr);
grid-template-columns: minmax(72px, auto) 28px minmax(88px, 1fr);
}
/* Color pickers / vendor list: two columns inside the wide card */
.topo-display-defaults--colors {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 14px;
}
.topo-display-defaults--colors .topo-display-defaults__row {
grid-template-columns: minmax(64px, auto) 28px minmax(72px, 1fr);
}
.topo-canvas-bg-hex {
@ -6308,10 +6324,11 @@ pre {
align-items: center;
gap: 6px;
font-size: 12px;
color: #334155;
color: #cbd5e1;
white-space: nowrap;
cursor: pointer;
user-select: none;
min-width: 0;
}
.topo-ctx {

6
web/src/pages/TopologyPage.tsx
View file

@ -2956,7 +2956,7 @@ export function TopologyPage() {
/>
{t("topology.discoverProjectNeighbors")}
</label>
<div className="topo-display-defaults topo-display-defaults--canvas-bg">
<div className="topo-display-defaults topo-display-defaults--canvas-bg topo-display-defaults--colors">
<div className="topo-display-defaults__head">
<strong>{t("topology.canvasBg")}</strong>
<button
@ -3001,7 +3001,7 @@ export function TopologyPage() {
/>
</div>
</div>
<div className="topo-display-defaults topo-display-defaults--canvas-bg">
<div className="topo-display-defaults topo-display-defaults--canvas-bg topo-display-defaults--colors">
<div className="topo-display-defaults__head">
<strong>{t("topology.textColors")}</strong>
<button
@ -3054,7 +3054,7 @@ export function TopologyPage() {
</div>
))}
</div>
<div className="topo-display-defaults topo-display-defaults--canvas-bg">
<div className="topo-display-defaults topo-display-defaults--canvas-bg topo-display-defaults--colors">
<div className="topo-display-defaults__head">
<strong>{t("topology.vendorColors")}</strong>
<button