fix(progress-indicator): fix vertical small screen bug

[andreancardona]

Closes #9261

Testing

• Checkout the progress indicator / change the knob to vertical / add a long title to one of the options
• In the inspector, change the screen to be less than 307px
• The lines should no longer push into the left border and should look like below

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 1df10dc

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/614b3651714c5a00079deb0c

😎 Browse the preview: https://deploy-preview-9598--carbon-react-next.netlify.app

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 54797d6

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61323dd8383ece00081546dc

😎 Browse the preview: https://deploy-preview-9598--carbon-elements.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 54797d6

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61323dd8eec6070008eb4d79

😎 Browse the preview: https://deploy-preview-9598--carbon-components-react.netlify.app

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 1df10dc

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/614b36511aaecd00087db45e

😎 Browse the preview: https://deploy-preview-9598--carbon-elements.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 1df10dc

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/614b365128b06b00087cc382

😎 Browse the preview: https://deploy-preview-9598--carbon-components-react.netlify.app

[jnm2377]

Hmm.. wondering if we should be finding a way to implement an ellipsis or somehow be more specific about text wrapping. The issue still occurs below 307 breakpoint, but also I think it could happen at any breakpoint if the vertical progress indicator is within a small container:

[joshblack]

@jnm2377 that makes sense, if we could have the text wrap then it would really help us out here since we need to use tooltips as soon as ellipsis get introduced 😞

[andreancardona]

@joshblack @jnm2377 Just pushed up a fix. let me know what you think!