fix(ui): wrap long unbroken text in alert dialog title and description

Merged
KO
1mo ago
+8-2

What & why

When a workspace name has no break opportunities (for example a pasted URL), the delete confirmation dialog breaks: the title, the "Has uncommitted changes" banner and the action buttons overflow the dialog and get clipped.

AlertDialogContent is a CSS grid with an implicit auto track, so the track grows to the min-content width of the longest unbreakable word instead of staying within max-w-*. At narrow window widths the header is also text-center, so the clipping happens on both sides.

Adding overflow-wrap: anywhere to AlertDialogTitle and AlertDialogDescription lets that text break, which shrinks its min-content width and keeps the dialog at its max width. The fix is in the shared @superset/ui component, so other alert dialogs that interpolate user-provided names (bulk delete, teardown failure, etc.) benefit too.

How I tested it

Rendered the shared AlertDialog in the packages/ui Storybook with the same markup and classes as DestroyConfirmPane, using a long URL as the workspace name, then captured before/after with the fix reverted and re-applied. The temporary story is not part of this PR. I did not exercise it in the Electron dev app.

Measured on [data-slot=alert-dialog-content] (clientWidth / scrollWidth):

ViewportBeforeAfter
576x420338 / 519 (overflows)338 / 338
1280x800510 / 519 (overflows)510 / 510

Narrow window (576x420)

BeforeAfter
Before: title and banner clipped on both sidesAfter: title wraps inside the dialog

Wide window (1280x800, cropped)

BeforeAfter
Before: title, banner and Delete anyway button overflow the right edgeAfter: everything stays inside the dialog
  • bun run lint passed.
  • bun run --cwd packages/ui typecheck passed (full bun run typecheck was not run).

Checklist

  • PR title follows conventional commits (type(scope): subject)
  • bun run lint and bun run typecheck pass (only the @superset/ui typecheck was run)
  • "Allow edits from maintainers" is checked on fork PRs

Summary by cubic

Fixes alert dialogs so long unbroken text, such as pasted URLs, no longer overflows or gets clipped at narrow window widths. The title and description now use overflow-wrap: anywhere, which lets the text break and keeps the dialog within its max width. Because the fix is in the shared @superset/ui alert dialog component, other dialogs that interpolate user-provided names also benefit.

Summary by CodeRabbit

  • Bug Fixes
    • Long, unbroken text in alert dialog titles and descriptions now wraps within the dialog.