From ed29b114b9e00022e845e6e8578facc2aea07503 Mon Sep 17 00:00:00 2001
From: ZacharyZcR <zacharyzcr1984@gmail.com>
Date: Fri, 10 Jul 2026 08:01:38 +0800
Subject: [PATCH] Fix snippet text overflow (#1000)

---
 src/ui/sidebar/SnippetsPanel.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/ui/sidebar/SnippetsPanel.tsx b/src/ui/sidebar/SnippetsPanel.tsx
index c8259e57..b70bbb34 100644
--- a/src/ui/sidebar/SnippetsPanel.tsx
+++ b/src/ui/sidebar/SnippetsPanel.tsx
@@ -908,12 +908,14 @@ function SnippetCard({
         onDragEnd={onDragEnd}
         className={`border bg-background p-2.5 flex flex-col gap-2 group/card transition-opacity ${isDragging ? "opacity-40" : "opacity-100"} border-border`}
       >
-        <div className="flex items-start gap-2">
+        <div className="flex items-start gap-2 min-w-0">
           <GripVertical className="size-3.5 mt-0.5 shrink-0 text-muted-foreground/30 group-hover/card:text-muted-foreground/60 cursor-grab active:cursor-grabbing transition-colors" />
           <div className="flex flex-col min-w-0 flex-1">
-            <span className="text-xs font-semibold">{snippet.name}</span>
+            <span className="text-xs font-semibold break-words">
+              {snippet.name}
+            </span>
             {snippet.description && (
-              <span className="text-xs text-muted-foreground">
+              <span className="text-xs text-muted-foreground break-words">
                 {snippet.description}
               </span>
             )}
@@ -925,7 +927,7 @@ function SnippetCard({
             />
           )}
         </div>
-        <span className="text-xs text-muted-foreground font-mono px-1">
+        <span className="text-xs text-muted-foreground font-mono px-1 min-w-0 break-all whitespace-pre-wrap">
           {snippet.content}
         </span>
         {targetHosts.length > 0 && (
@@ -936,7 +938,7 @@ function SnippetCard({
                 className="inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 bg-accent-brand/10 text-accent-brand border border-accent-brand/20"
               >
                 <Server className="size-2.5" />
-                {host.name || host.ip}
+                <span className="min-w-0 truncate">{host.name || host.ip}</span>
               </span>
             ))}
           </div>