From 00926196f09dd5bd00ffc4ee6c54c61a4a1f455c Mon Sep 17 00:00:00 2001
From: oliver <zhoutianjun127@126.com>
Date: Wed, 5 Aug 2026 09:36:14 +0800
Subject: [PATCH] Widen the topology Display panel into a two-column card.

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>
---
 web/src/index.css              | 29 +++++++++++++++++++++++------
 web/src/pages/TopologyPage.tsx |  6 +++---
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index f1575e9..49e7345 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -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 {
diff --git a/web/src/pages/TopologyPage.tsx b/web/src/pages/TopologyPage.tsx
index b22272a..df771ee 100644
--- a/web/src/pages/TopologyPage.tsx
+++ b/web/src/pages/TopologyPage.tsx
@@ -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