Improve multi path component for moblie

[timonrey]

Description of changes

Link to original ticket closes #https://github.com/commercetools/learning-tech/issues/676

Link to change (deep-link for reviewing the change)

Screenshot of changes (if applicable)

DoD guidelines

• [ ] user documentation added?
• [x] stakeholders approve changes? (if needed)

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 3d3066bebcf60fcbb1a4fa60469e03dd5691d451

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions[bot]]

🚚 Build Process Details

Preview URLs:

• https://docskit-tt-improve-multi-path-component-for-mobile.commercetools.vercel.app (permalink to the last build of this branch)
• https://docskit-sha-cdf55a8396662d616471e38dccfd071bcf0fd68e.commercetools.vercel.app (this commit)

[ColinRosati]

Hey @zbalek , Ive been working on the scroll arrow feature. Can you take a look? https://docskit-tt-improve-multi-path-component-for-mobile.commercetools.vercel.app/docs-smoke-test/views/multi-path-block?activePath=javascript

I have been working on the ellipsis functionality in the design spec and would suggest we skip that requirement. The reason being is that we would have to write custom appended/prepend ellipsis to truncate the overflowing text. This actually comes with a relatively large amount of code and performance decline by implementing this custom ellipsis behaviour by adding dedicated "observers" for each tab to see if its overflowing and by how much. We also have another problem where we would have to arbitrarily clip some amount of characters not knowing how many characters might be in the tab label. This could pretty hacky IMO.

I took alot of insporation from the pretty widely used material UI lib https://mui.com/material-ui/react-tabs/#scrollable-tabs

[zbalek]

Hi @ColinRosati - thanks for a detailed explanation. Taking the constraints you've described into consideration and the fact that the issues we wanted to eliminate are gone, I'm happy to proceed with the solution you've shared above.