Describe the bug
A title containing one long word with no spaces is cut off at the modal's edge, and the close button is pushed out of the modal with it. The button goes first: it is already gone while the title still looks fine. Since shouldCloseOnEsc and shouldCloseOnOverlayClick both default to false, a consumer passing noFooter is left with a modal it cannot close.
The title is a BBBTypography paragraph sharing a flex row with the close button in ModalHeader (src/components/Modal/styles.ts). Nothing sets a word-breaking rule on it, so as a flex item it never shrinks below its longest word, and the modal clips whatever sticks out.
To Reproduce
Steps to reproduce the behavior:
- Storybook →
BBBModal → Default.
- Set the
title control to Averyveryveryveryveryveryveryveryveryverylongwordwithoutspaces.
- Narrow the window until the modal hits its
90vw cap.
Expected behavior
The title wraps, and the close button stays inside the modal at any width.
Actual behavior
The word stays on one line and is clipped at the modal edge; the close button is clipped with it.
Screenshots

Lib version:
@bigbluebutton/bbb-ui-components-react 0.7.0
Describe the bug
A
titlecontaining one long word with no spaces is cut off at the modal's edge, and the close button is pushed out of the modal with it. The button goes first: it is already gone while the title still looks fine. SinceshouldCloseOnEscandshouldCloseOnOverlayClickboth default tofalse, a consumer passingnoFooteris left with a modal it cannot close.The title is a
BBBTypographyparagraph sharing a flex row with the close button inModalHeader(src/components/Modal/styles.ts). Nothing sets a word-breaking rule on it, so as a flex item it never shrinks below its longest word, and the modal clips whatever sticks out.To Reproduce
Steps to reproduce the behavior:
BBBModal→Default.titlecontrol toAveryveryveryveryveryveryveryveryveryverylongwordwithoutspaces.90vwcap.Expected behavior
The title wraps, and the close button stays inside the modal at any width.
Actual behavior
The word stays on one line and is clipped at the modal edge; the close button is clipped with it.
Screenshots

Lib version:
@bigbluebutton/bbb-ui-components-react0.7.0