fix: 🤔 mobile view in SDS Storybook

[martascorreia]

Current behavior

Following this ticket #2862 and PR #2867, there are quite a few component stories that look clipped in mobile view. The reality is that they require users to swipe on the screen to use them, but this is not intuitive nor practical. Some of them just need a limited width or to be moved into the next line to show correctly on mobile.

Components:

• sd-button: Variants, As link, Loading, Disabled, Visually Disabled, Inverted
• sd-checkbox-group: Orientation
• sd-combobox: All Stories
• sd-datepicker: All Stories
• sd-flipcard: All Stories
• sd-input: Label, Floating Label, Help Text, Icon
• sd-notification: Toast Notification, Toast Bottom Center
• sd-optgroup: All Stories
• sd-radio-button: Size, Disabled, Visually Disabled
• sd-radio-group: Orientation
• sd-radio: Size
• sd-select: All Stories
• sd-step-group: All Stories
• sd-step: Orientation, Description
• sd-tag: As link
• sd-teaser: Variant
• sd-textarea: All Stories

Styles:

• sd-chip: Variants
• sd-copyright: Orientation, Variants, No Shadow
• sd-flag: Variants
• sd-list: Levels, Orientation

This is also happening in the Screenshot tests. These issues are not because of the components, but because of enforced widths and heights in the containers holding them in our stories/screenshots.

Expected behavior

Users should be able to see these components and styles without swiping.

Steps to reproduce

1. Go into SDS Storybook and into one of the components/styles mentioned above.
2. Open dev tools and switch to mobile view.

Technical Information

DoR

• Item has business value
• Item has been estimated by the team
• Item is clear and well-defined
• Item dependencies have been identified