From 011297daf31914984392cbdf9cfae4559cd354ca Mon Sep 17 00:00:00 2001
From: Kang <CoderKang@hotmail.com>
Date: Mon, 31 Aug 2026 10:01:43 +0800
Subject: [PATCH] style(NetworkPanel): enhance layout and styling for TunnelRow
 and TunnelRuntimeBadge components (#532)

- Updated the TunnelRow component to improve the layout by ensuring the name display is properly truncated and responsive.
- Modified the TunnelRuntimeBadge component to include additional styling for better visual consistency and to prevent text overflow.
---
 src/components/panel/NetworkPanel.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/panel/NetworkPanel.tsx b/src/components/panel/NetworkPanel.tsx
index 5c362ebe..1d849a70 100644
--- a/src/components/panel/NetworkPanel.tsx
+++ b/src/components/panel/NetworkPanel.tsx
@@ -251,7 +251,10 @@ function TunnelRow({
     <div className="flex items-center gap-3 px-3 py-2.5 transition-colors hover:bg-accent">
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <div className="truncate text-sm font-medium" style={{ color: "var(--df-text)" }}>
+          <div
+            className="min-w-0 flex-1 truncate text-sm font-medium"
+            style={{ color: "var(--df-text)" }}
+          >
             {tunnel.name || endpoint}
           </div>
           <TunnelRuntimeBadge state={runtimeState} enabled={tunnel.is_open} />
@@ -326,7 +329,12 @@ function TunnelRuntimeBadge({ state, enabled }: { state?: TunnelRuntimeState; en
       error: "bg-destructive/10 text-destructive",
     }[status] ?? "bg-muted text-muted-foreground";
   const badge = (
-    <span className={cn("rounded-full px-2 py-0.5 text-[0.625rem] font-medium", className)}>
+    <span
+      className={cn(
+        "shrink-0 whitespace-nowrap rounded-full px-2 py-0.5 text-[0.625rem] font-medium",
+        className,
+      )}
+    >
       {label}
     </span>
   );