fix(ui): adapt NoProjectMessage on mobile to add padding and change direction

[JPeer264]

This changes the way how the "NoProjectMessage" is shown on mobile and tablet. A little padding is always added, so that the corners are not touching the browser borders.

Before on various mobile devices:

After on various mobile devices:

[codecov]

⚠️ JUnit XML file not found

The CLI was unable to find any JUnit XML files to upload.
For more help, visit our troubleshooting guide.

[TkDodo]

I think the after does look better, however:

• why would we hide the image completely on the smallest mobile device? I think there is still enough space to show it above the text
• we should be able to achieve this with just the <Flex> component. It allows for responsive props, see: https://sentry.sentry.io/stories/layout/container#responsive-example

[JPeer264]

why would we hide the image completely on the smallest mobile device? I think there is still enough space to show it above the text

It was suggested by design to remove it entirely on mobile.

we should be able to achieve this with just the component. It allows for responsive props

Amazing, I must have skipped that part. Will add it.
Edit: It seems only the Container component is having these props. Not sure if the Container is the right use-case here

[TkDodo]

It was suggested by design to remove it entirely on mobile.

👍

It seems only the Container component is having these props. Not sure if the Container is the right use-case here

Flex is built on top of Container, and it inherits all its props. Think of Container as a generic “div”, and Flex as a more contained and semantic Container that has some props pre-set, like display: 'flex' or 'inline-flex'.

So you have e.g. responsive width (inherited from Container) and responsive direction (added by Flex).

I’d like to understand what isn’t possible with the current layout components because it might mean we have to tweak them. But we shouldn’t need to apply classNames to an svg just to be able to layout things responsively.

[JPeer264]

@TkDodo I changed everything to use the Flex and it looks way cleaner. However due to 1 limitation I now display the image on mobile (it will get downloaded anyways since it is inline).

The reason is, that the xs breakpoint inside the object is not really xs but everything between 0 and sm (which is 800px). And theoretically I wanted to hide the image only between 0 and 500px (which wouldn't be possible within this helper). I'm not sure if this is something we would like to add though

[TkDodo]

nice work 🙌

[JonasBa]

why would we hide the image completely on the smallest mobile device? I think there is still enough space to show it above the text

It was suggested by design to remove it entirely on mobile.

we should be able to achieve this with just the component. It allows for responsive props

Amazing, I must have skipped that part. Will add it. Edit: It seems only the Container component is having these props. Not sure if the Container is the right use-case here

@vgrozdanic what if we added a 0 breakpoint that would span from 0 to the next defined breakpoint? This way you could do {{0: 'none', xs: 'block'}}. Would that help solve your problem?

[JonasBa]

@vgrozdanic @TkDodo I've taken a first pass on this #101440