Skip to content

Dialog title hardcodes whitespace-nowrap, causing long titles to overflow instead of wrapping #198

Description

@einari

Expected

A long `title` passed to `Dialog` (`@cratis/components/Dialogs`) wraps onto multiple lines within the dialog's width.

Actual

The title overflows the dialog box horizontally instead of wrapping. In `Source/Dialogs/Dialog.tsx`'s `headerElement`, the title is rendered as:

```tsx
{title}
```

`whitespace-nowrap` prevents the browser from wrapping the text at all, so anything longer than the dialog's width (a common case for e.g. a GitHub issue/PR title passed straight through) runs past the dialog's edge.

Why this is hard to work around from a consumer

The hardcoded class lives on Cratis's own inner ``, not on any PrimeReact-generated pass-through slot - only the outer `.p-dialog-title` wrapper is reachable via `pt`, so a consumer has no documented styling seam that reaches this specific span. The only workaround is a global CSS override compounding `.p-dialog-title .whitespace-nowrap`, which is fragile (depends on Tailwind's utility class name staying `whitespace-nowrap` and on `@primereact/styles`' `p-dialog-title` class name staying stable).

Suggested direction

Drop `whitespace-nowrap` from the title span (or replace with `break-words`/`overflow-wrap: break-word`) so long titles wrap by default, matching how most dialog libraries handle titles. If a consumer genuinely wants single-line truncation, that could be an opt-in prop instead of the hardcoded default.

Environment

Found through a representative host that passes unbounded issue titles directly to Dialog's title prop.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions