fix(BBBModal): wrap long titles instead of pushing the close button out - #92
Merged
Merged
Conversation
The modal title is a flex item sharing the header row with the close button, and a flex item does not shrink below its longest word. A title made of one long unbroken word therefore overflows the header, and the modal clips both the title and the close button. Since shouldCloseOnEsc and shouldCloseOnOverlayClick default to false, a modal rendered with noFooter is left with no way to be closed. Let the title take the remaining space, shrink below its content width and break anywhere when needed, so it wraps and the close button stays inside the modal at any width. Add a gap so the wrapped title never touches the button. Closes bigbluebutton#83
Add a LongTitle story to exercise the header layout with a title made of a single long word, which is the case that used to push the close button out of the modal.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
BBBModaltitle shrink and wrap: the title inModalHeaderis now a styledBBBTypography(ModalTitle) withflex: 1,min-width: 0andoverflow-wrap: anywhere. This lets it break long words, so the close button stays inside the modal at any width.gaptoModalHeaderso a wrapped title never touches the close button.LongTitleStorybook story that uses a title made of one long word with no spaces, the case from the issue.Closes Issue(s)
Closes #83