StructuredListWrapper doesn't respond to the size of the screen very well

[joshblack]

@srlim commented on Sun Apr 15 2018

Detailed description

Describe in detail the issue you're having.
When the screen size is small, structured list doesn't respond the size very well.

Is this a feature request (new component, new icon), a bug, or a general issue? bug

Is this issue related to a specific component? StructuredListWrapper

What did you expect to happen? What happened instead? What would you like to see changed?
It should be able to contain its contents in the wrapper.

What browser are you working in? Chrome, Firefox

What version of the Carbon Design System are you using?
carbon-components: 8.16.8
carbon-components-react: 5.29.5

What offering/product do you work on? Any pressing ship or release dates we should be aware of?
IBM Cloud Private

Steps to reproduce the issue

https://codesandbox.io/s/0qjlxnmz30

If you reduce the width of the browser size to smaller than 377, module wrapper content isn't contained within the window

---

@joshblack commented on Mon Apr 23 2018

cc @carbon-design-system/design what's the expected visual design at this width? Noticed we could re-create in our codepen example as well if we change the column names from ColumnA to Column A. Would assume what's shown in the screenshot is valid, as the word will wrap but the text remains centered, but wanted to double check 👍

---

@aagonzales commented on Mon Apr 23 2018

Headers can wrap up to two lines and should be aligned along the base line (not vertically centered that's being shown. That's a bug on our side)

Structured Lists should trigger a horizontal scroll on smaller screens. Columns should decrease to their smallest size (chosen by each individual use-case made my product side designers).

---

@joshblack commented on Mon Apr 23 2018

Thanks @aagonzales! 🙏 Moving this over to carbon-componenst for a style fix 😄

[srlim]

Thanks @joshblack @aagonzales !