Files
supabase/packages/ui-patterns
ChrisandDanny White 842e1b5e40 fix(ui-patterns): wrap long confirm strings in TextConfirmModal (#51503)
## Problem

Long confirm strings in `TextConfirmModal` don't wrap. I noticed it when
deleting a preview branch with a long name: the name runs past the edge
of the dialog and gets cut off, so you can't read what you're supposed
to type.

## Solution

Changed `whitespace-pre` to `whitespace-pre-wrap` on the confirm string
so it wraps. Did the same for the copy button in the `enableCopy`
variant and let it grow in height so the wrapped text fits.


https://github.com/user-attachments/assets/0a2aa346-8e61-4d58-b595-e6adee4aa1fd

## Review instructions

1. Open the Text Confirm Dialog page in the design system preview.
2. In the demo, change `bucketName` to something long and open the
dialog. The name should wrap instead of being cut off.
3. Add `enableCopy` to the demo and check the copy button wraps too.
4. Short names should look the same as before.

## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [ ] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-10-12 02:09:52 +00:00
..
2026-07-02 17:03:08 +02:00

Supabase UI Patterns

This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example), which make no sense to be included in all apps. It should also be used for components which are constructed using various components from the ui package.

This package does not have a barrel file - each component has to be imported from its index (ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in 1 or 2 apps doesn't burden the rest of the apps.