Text inside Masthead component doesn't render as single line on iPhone SE screen size

[jmalvinez]

Prerequisites

• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the issue

Hi team, the text inside the Masthead component doesn't render as a single line on iPhone SE screen size.

Steps to reproduce

1. On Chrome, go to Masthead component in Storybook.
2. Switch to iPhone SE screen size using Chrome dev tools.

Expected behaviour
Text inside Masthead component is rendered as a single line similar to the behaviour in the deprecated @govtechsg/sgds-masthead-react package.

Actual behaviour
Text inside Masthead component is rendered as two lines.

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

Describe your frontend stack. What version of React and @govtechsg/sgds-web-component are you using? CSR or SSR?

React v18.2.0, @govtechsg/sgds-web-component v1.0.2

[clukhei]

@jmalvinez Hi I would say the masthead itself does not have a bug. Its looking like that due to the additional padding from Storybook's default container padding. We will see what we can do to remove the container paddings in the documented page, but the component itself is working fine. See the screenshot above where i remove storybook's padding in iphone SE size

[clukhei]

Closing this as it will be fixed in the version 3 of storybook documentation