[code-snippet]: min-width causes reflow (400%) violation

[swgraham]

Environment

Operating system
MacOS

Browser
Chrome
(any?)

Assistive technology used to verify
Set resolution to 1280 x 800 Zoom to 400%
OR
In Chrome use Responsive mode, set to 320x260

Detailed description

What version of the Carbon Design System are you using?

7.24/10.24

What did you expect to happen?

When resize screen to 320px wide - Should be able to see single line code snippet Copy Button w/ padding of 1rem on each side.

What happened instead?

Single line code snippet itself min-width is 320px so with any padding around it, you cannot see or USE the copy button.

What WCAG 2.1 checkpoint does the issue violate?

1.4.10 REFLOW

https://codesandbox.io/s/exciting-wave-q0cy5?fontsize=14&hidenavigation=1&theme=dark

In above codesandbox, make width of embedded browser <340 and you will see copy button become inaccessible.

[emyarod]

I don't think the codesandbox you provided shows the right issue, but the workaround would be to reduce the min-width value on .bx--snippet--single

[swgraham]

You are correct on codesandbox, I had edited it mistakenly on another issue and have reverted it to be correct.