Feature Request: Being able to detect mobile / desktop

[sov-brandstaetter]

As far as I found out there is currently no way to detect the current screen size from a checkout ui extension.
I want to use a different layout for mobile and desktop, in my case I want to use a grid with two columns on desktop and only one column / stacked on mobile.

Others might need it more granular like XS, SM, MD, LG, but in my case it would be enough to know if its mobile or not.

Would be great if you could add this feature

Thanks in advance and best regards

[jun-shop]

👋 we have some props that take a responsive StyleHelper utility. For instance Grid's columns, rows, spacing, blockAlignment, inlineAlignment, border, borderWidth, cornerRadius, maxBlockSize, maxInlineSize, minInlineSize, minBlockSize, padding, and background

For your example you could do the following:

<Grid columns={Style.default('auto').when({viewportInlineSize: {min: 'medium'}}, ['50%', 'auto'])}>
  <TextBlock>Content here</TextBlock>
  <TextBlock>Content here</TextBlock>
</Grid>