can we have a custom mobile view threshold?

[jackazadian1]

The default screen width threshold that puts the calendar in mobile view is currently 39rem. My website has different mobile threshold. Can we make the calendar go into mobile view at a custom screen width?

[WickyNilliams]

Hmm this is a good point, but I'm not sure how to solve it... You can't use CSS vars in media queries so it's not something that can be passed in easily. I'll have a think

[WickyNilliams]

Possible solutions:

1. add some sort of media-query prop, which defines the breakpoint at which mobile layout is shown (or the inverse, if we want to be mobile first).
   • pros:
     • explicit and clear where value comes from
     • allows for media query to be changed and adjusted at runtime (not sure that's valuable tbh)
   • cons:
     • feels weird having a media query in a property/attribute/html
     • need to ensure this prop is set on every instance of the component for consistency
2. read a media query from some pre-defined CSS variable e.g. --duet-media-query
   • pros:
     • set once and all instances of the component will use the same value
     • feels more natural to define a media query in css (could also be defined in html via style attribute)
   • cons:
     • implicit and not very clear where value comes from
     • does not allow for media query to be changed and adjusted at runtime (much like regular media queries, so i don't think it's a drawback)

Both of these would ultimately pass the value to matchMedia. I am leaning towards option 2 since it's more natural to specify in CSS and every instance will naturally use the same value that way

[jackazadian1]

option 2 is exactly what I had in mind when I was looking for a solution.

[zellerbaptiste]

Hi, any update on that subject ? Option 1 would work perfectly for me.