mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-09 15:07:10 +02:00
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:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user