Skip to content

BBBModal title overflows the header and pushes the close button out of the modal #83

Description

@Arthurk12

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:

  1. Storybook → BBBModal → Default.
  2. Set the title control to Averyveryveryveryveryveryveryveryveryverylongwordwithoutspaces.
  3. 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
Image

Lib version:
@bigbluebutton/bbb-ui-components-react 0.7.0

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

    bugSomething isn't working

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions