From e904fcbaf16b12eb822e95a7a2efec59af3acd08 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 22 Dec 2025 17:00:24 +0000
Subject: [PATCH] fix: prevent command text overflow in spell dialogs

Replace `break-all` with `break-words overflow-x-auto` to improve
text wrapping behavior in command preview areas. This prevents
words from breaking awkwardly in the middle while still allowing
long commands to be displayed properly.

Changes:
- CreateSpellDialog.tsx: Fixed command preview overflow
- SpellDialog.tsx: Fixed command display overflow
- SpellRenderer.tsx: Fixed detail view command overflow

The new approach breaks at word boundaries when possible and
provides horizontal scrolling for exceptionally long commands.
---
 src/components/CreateSpellDialog.tsx         | 2 +-
 src/components/nostr/SpellDialog.tsx         | 2 +-
 src/components/nostr/kinds/SpellRenderer.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CreateSpellDialog.tsx b/src/components/CreateSpellDialog.tsx
index 918d40b..b0aa215 100644
--- a/src/components/CreateSpellDialog.tsx
+++ b/src/components/CreateSpellDialog.tsx
@@ -601,7 +601,7 @@ export function CreateSpellDialog({
               <label className="text-xs font-medium text-muted-foreground uppercase">
                 Generated Command
               </label>
-              <div className="bg-background border rounded-md p-3 font-mono text-xs break-all text-primary">
+              <div className="bg-background border rounded-md p-3 font-mono text-xs break-words overflow-x-auto text-primary">
                 {generatedCommand}
               </div>
             </div>
diff --git a/src/components/nostr/SpellDialog.tsx b/src/components/nostr/SpellDialog.tsx
index aa803c4..b3dcc37 100644
--- a/src/components/nostr/SpellDialog.tsx
+++ b/src/components/nostr/SpellDialog.tsx
@@ -343,7 +343,7 @@ export function SpellDialog({
             <label htmlFor="command" className="text-sm font-medium">
               Command
             </label>
-            <div className="rounded-md border border-input bg-muted px-3 py-2 text-sm font-mono">
+            <div className="rounded-md border border-input bg-muted px-3 py-2 text-sm font-mono break-words overflow-x-auto">
               {filterSpellCommand(
                 mode === "edit" && existingSpell
                   ? existingSpell.command
diff --git a/src/components/nostr/kinds/SpellRenderer.tsx b/src/components/nostr/kinds/SpellRenderer.tsx
index 8dabac7..bc53344 100644
--- a/src/components/nostr/kinds/SpellRenderer.tsx
+++ b/src/components/nostr/kinds/SpellRenderer.tsx
@@ -256,7 +256,7 @@ export function SpellDetailRenderer({ event }: BaseEventProps) {
           </h3>
           <ExecutableCommand
             commandLine={spell.command}
-            className="text-sm font-mono p-4 bg-muted/30 border border-border text-primary hover:underline hover:decoration-dotted cursor-crosshair break-all"
+            className="text-sm font-mono p-4 bg-muted/30 border border-border text-primary hover:underline hover:decoration-dotted cursor-crosshair break-words overflow-x-auto"
           >
             {spell.command}
           </ExecutableCommand>