Modal cannot reflow to 400% zoom

[mbgower]

Modal cannot reflow to 400% zoom

React

Windows 7 (also occurs in OSX)

Chrome (cannot reproduce in FF since it only zooms to 300%)

Detailed description

Zooming component causes text to increase in size (as expected) and several breakpoints to occur (as expected); however, the 'body' text (the lorem ipsum) will disappear entirely at 400% zoom.

What did you expect to happen?

The content should have reflowed so at least some of the body text, along with the vertical scrollbar that appeared, was still visible.

What happened instead?

The content reflowed but all the body text disappeared.

What WCAG 2.1 checkpoint does the issue violate?

Reflow

Steps to reproduce the issue

1. using Chrome on a desktop, open modal in React http://react.carbondesignsystem.com/?path=/story/modal--default
2. Zoom browser with Ctrl++ until it reaches 400%

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

Modal at 300%. Text content in dialog still visible, wtih vertical scrollbar. Good behaviour.

Modal at 400%. Text content in dialog and scrollbar completely absent. Failure.

Occurs in react storybook, theme and v10 (carbondesignsystem.com)

I suspect one of the contributors to this issue is that the main content area does not include the full width of the dialog, but instead leaves substantial white space to the right of the scrollbar. If the full width of the dialog was used, the issue would likely be resolved.

[asudoh]

CC @carbon-design-system/design to see their thoughts. Thanks!

[shixiedesign]

This looks like a bug to me. The white space to the right of body copy should be 25% of modal width. When zoomed in, it should be treated the same as moving on to sm breakpoint, so the body copy should look like below:

[asudoh]

Seems that the cause is the bottom margin of .bx--modal-content (seems 3rem) rather than the responsive styling. Below screenshot would be the best explanation:

[asudoh]

#4657 implements a new spec (#4607) that removes the right margin for smaller width. I can see modal body content remains with 400% zoom with the new UI.