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.
This commit is contained in:
Claude
2025-12-22 17:00:24 +00:00
parent 0d8f8b7807
commit e904fcbaf1
3 changed files with 3 additions and 3 deletions

View File

@@ -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>

View File

@@ -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

View File

@@ -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>