Vertical Progress Indicator: missing spacing when flex wraps on narrow widths

[zachhardesty7]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

when using the ProgressIndicator component with the vertical prop set to true, e.g. <ProgressIndicator vertical />, narrow container width causes an the SVG and text in each step to wrap. this is due to the flex-wrap CSS property. since the text of the step has no margin/padding, it sits directly against the vertical line. presumably, there should be some spacing. this definitely occurs in the newest Chrome Dev version but I haven't tested others yet. other browsers likely have the same issue.

Steps to reproduce the issue

while the below reproduction steps are somewhat contrived, this can happen whenever the container is too small. so when ProgressIndicator is in a row, this can occur at much larger screen sizes. for example, in @carbon/ibm-security, our Wizard will cause overflow overlapping. in a specific example of ISV, we're seeing the flow-wrap at 707px.

1. open Carbon React storybook to ProgressIndicator
2. open bottom drawer, select Knobs tab, and check the vertical prop
3. resize the visible area to less than 314px (using dev tools and making them really big or the device screen size simulator)
4. observe the SVGs and text splitting to separate lines and the lack of spacing on the left seen in the screenshot

Additional information

• Carbon Storybook
• IBM Security Wizard
  
• ISV Tearsheet
  

[tay1orjones]

@zachhardesty7 thanks for opening this. We can take a look at improving this component's wrapping behavior down to smaller widths.