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

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; left: 0;
z-index: 20; z-index: 20;
display: grid; display: grid;
gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
min-width: 260px; gap: 8px 14px;
padding: 8px 10px; 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: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 8px; border-radius: 8px;
background: #0f172a; background: #0f172a;
@ -6198,9 +6202,10 @@ pre {
} }
.topo-display-defaults { .topo-display-defaults {
grid-column: 1 / -1;
display: grid; display: grid;
gap: 8px; gap: 8px;
margin-top: 6px; margin-top: 2px;
padding-top: 8px; padding-top: 8px;
border-top: 1px solid rgba(148, 163, 184, 0.18); border-top: 1px solid rgba(148, 163, 184, 0.18);
} }
@ -6212,6 +6217,7 @@ pre {
gap: 8px; gap: 8px;
font-size: 12px; font-size: 12px;
color: #cbd5e1; color: #cbd5e1;
grid-column: 1 / -1;
} }
.topo-display-defaults__row { .topo-display-defaults__row {
@ -6222,7 +6228,17 @@ pre {
} }
.topo-display-defaults--canvas-bg .topo-display-defaults__row { .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 { .topo-canvas-bg-hex {
@ -6308,10 +6324,11 @@ pre {
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-size: 12px; font-size: 12px;
color: #334155; color: #cbd5e1;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
min-width: 0;
} }
.topo-ctx { .topo-ctx {

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

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