From cb865254e4f89c0a83cca63ce0bf69429f76048c Mon Sep 17 00:00:00 2001
From: oliver <zhoutianjun127@126.com>
Date: Sat, 1 Aug 2026 17:52:39 +0800
Subject: [PATCH] Polish topology canvas chrome and toolbar text clipping.

Remove the edge legend and React Flow attribution, and fix layout/align select padding so Chinese labels render fully.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/index.css              | 23 ++++++++++++++++-------
 web/src/pages/TopologyPage.tsx | 25 +------------------------
 2 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index 1cb513f..e825315 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -2800,14 +2800,17 @@ pre {
   color: #5b6b7c;
 }
 
+.app-main .topo-toolbar__find,
 .topo-toolbar__find {
   width: 190px;
   max-width: 36vw;
-  height: 28px;
+  height: 30px;
+  box-sizing: border-box;
   padding: 0 8px;
   border: 1px solid #b8c4d2;
   border-radius: 6px;
   font-size: 12px;
+  line-height: 1.2;
   background: #fff;
 }
 
@@ -2903,26 +2906,27 @@ pre {
   line-height: 1;
 }
 
+.app-main .topo-toolbar__select,
 .topo-toolbar__select {
   min-width: 88px;
-  height: 28px;
+  height: 30px;
+  box-sizing: border-box;
   border: 1px solid #b8c4d2;
   border-radius: 6px;
   background: #fff;
   color: #0f2744;
   font-size: 12px;
+  line-height: 1.2;
   padding: 0 8px;
+  vertical-align: middle;
 }
 
-.topo-toolbar__display {
-  position: relative;
-}
-
+.app-main .topo-toolbar__display > summary,
 .topo-toolbar__display > summary {
   list-style: none;
   cursor: pointer;
   user-select: none;
-  height: 28px;
+  height: 30px;
   padding: 0 10px;
   border: 1px solid #b8c4d2;
   border-radius: 6px;
@@ -2930,10 +2934,15 @@ pre {
   color: #0f2744;
   font-size: 12px;
   font-weight: 600;
+  line-height: 1.2;
   display: inline-flex;
   align-items: center;
 }
 
+.topo-toolbar__display {
+  position: relative;
+}
+
 .topo-toolbar__display > summary::-webkit-details-marker {
   display: none;
 }
diff --git a/web/src/pages/TopologyPage.tsx b/web/src/pages/TopologyPage.tsx
index 3593626..80d079a 100644
--- a/web/src/pages/TopologyPage.tsx
+++ b/web/src/pages/TopologyPage.tsx
@@ -2293,6 +2293,7 @@ export function TopologyPage() {
                 nodeTypes={nodeTypes}
                 connectionMode={ConnectionMode.Loose}
                 defaultEdgeOptions={{ type: "straight" }}
+                proOptions={{ hideAttribution: true }}
                 nodesDraggable={toolBehavior.nodesDraggable}
                 nodesConnectable={toolBehavior.nodesConnectable}
                 elementsSelectable={toolBehavior.elementsSelectable}
@@ -2370,30 +2371,6 @@ export function TopologyPage() {
                   </ControlButton>
                 </Controls>
                 <MiniMap pannable zoomable />
-                <div className="topo-legend" aria-hidden="true">
-                  {(
-                    [
-                      ["manual", t("topology.edgeManual")],
-                      ["discovered", t("topology.edgeDiscovered")],
-                      ["stale", t("topology.edgeStale")],
-                    ] as const
-                  ).map(([kind, label]) => {
-                    const d = edgeDefaults[kind];
-                    return (
-                      <span key={kind} className="topo-legend__item">
-                        <span
-                          className="topo-legend__swatch"
-                          style={{
-                            borderTopColor: d.stroke_color,
-                            borderTopWidth: Math.max(1, Math.min(4, d.stroke_width)),
-                            borderTopStyle: d.line_style === "solid" ? "solid" : "dashed",
-                          }}
-                        />
-                        {label}
-                      </span>
-                    );
-                  })}
-                </div>
               </ReactFlow>
             </TopoDisplayContext.Provider>
           ) : (