ToddWebDev commented 2 weeks ago

Bug Report

[x] I've searched for any related issues and avoided creating a duplicate issue

What happened

When a 'va-modal' displays a long word (e.g. 30 characters or more) the text overflows and/or breaks the layout.

Screenshots

What I expected to happen

Modal text to not overflow

Reproducing

Version: current
Device (e.g.iPhone, Macbook) All
Browser (e.g. Chrome, Safari) All

Steps to reproduce:

Go to va-modal in Storybook
Replace any word in the modal with an extra long word

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

[ ] This bug is blocking work currently in progress
[x] This bug is affecting work currently in progress but we have a workaround
[ ] This bug is blocking work planned within the next few sprints
[ ] This bug is not blocking any work
[ ] Other

Details

This can be fixed with CSS.

caw310 commented 2 weeks ago

@ToddWebDev Is this a new issue? @Mottie just implemented a fix. https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2492

ToddWebDev commented 2 weeks ago

I think this is a separate issue. I can replicate the overflow issue with a long word on Storybook. It can be fixed with word-break: break-word; or similar css.

caw310 commented 1 week ago

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rsmithadhoc

ToddWebDev commented 1 week ago

Just an implementation note that the word break should only apply to the modal header and modal body content. We do not want the words to break in the modal footer buttons. Since the buttons are flexbox children, it could lead to some awkward word breaking. Thank you.

department-of-veterans-affairs / vets-design-system-documentation

Modal text overflow #3355