Unify media queries used in components

[web-padawan]

I've gone through all the components and collected media queries we use.

component	property	query
app-layout	overlay	(max-width: 800px) and (max-height: 600px)
app-layout	touch-optimized	(max-width: 800px) and (min-height: 500px)
board	small	(max-width: 600px)
board	medium	(max-width: 960px)
board	large	(min-width: 961px)
confirm-dialog	(not reflected)	(max-width: 360px)
crud	(not reflected)	(max-width: 600px), (max-height: 600px)
login	small	(max-width: 500px)
login	small landscape	(max-height: 600px) and (min-width: 600px) and (orientation: landscape)
login	really small landscape	(max-height: 500px) and (min-width: 600px) an (orientation: landscape), only screen and (max-width: 600px) and (min-width: 600px) and (orientation: landscape)
login	iPhone X notch	((device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)
context-menu	wide	(min-device-width: 750px)
date-picker	fullscreen	(max-width: 420px) and (max-height: 420px)
date-picker	desktop	(min-width: 375px)
notification	(not reflected)	(max-width: 420px)
select	phone	(max-width: 420px) and (max-height: 420px)

Note: we also use (max-width: 420px) and (max-height: 420px) in menu-overlay mixin:

https://github.com/vaadin/vaadin-lumo-styles/blob/ef4d43fc7e1b51f26a957c6a978b3f97a24119cd/mixins/menu-overlay.html#L45-L47

Let's use this issue to gather opinions on how to unify the media queries we have.

[web-padawan]

This was requested by the user also at https://github.com/vaadin/vaadin-app-layout/issues/130

[moderndeveloperllc]

Not a media query, but additional info that might be useful in the discussion:
app-layout drawer width: 16em.
Related issue: https://github.com/vaadin/vaadin-app-layout/issues/114

[web-padawan]

Transferred this ticket from Lumo, because it's a broader issue and we should have a unified set of breakpoints as part of the core components set, and then configure them in Lumo / Material.

[jouni]

Food for thought: https://ethanmarcotte.com/wrote/not-the-device/

tl;dr: avoid using broad terms like phone/tablet/desktop, consider specific conditions or features instead (input method, screen size, network conditions).

[Haprog]

I'm a bit on the fence about whether this makes sense or not (or it depends on how this is executed). Imo breakpoints should be optimized for the content so that the given content works best in whatever viewport size.

Most components are unique (in comparison to each other) and probably should not be artificially forced to use a limited set of shared breakpoints which might not work too well for the use cases of every component.

However the are probably some common cases among components which could/should use the exact same logic or breakpoints for some behaviours. There can be some common/shared breakpoints which are needed in many places, but I think it's totally fine to have additional unique component specific media queries where it makes sense.

[jouni]

Yeah, the title of this issue could probably be something like “inconsistent and/or non-systemic use of media queries”.

I think this is more about finding a system/process for identifying the need for breakpoints and a system for defining them, so that they do not get out of hand and are consistent when they should be.

[lkraav]

⬆️ what @jouni said - biggest issue at the moment is the lack of discoverability - you might find your components needs a media query, but in order to work together in harmony with the others, you'd need to know what other components are already doing.

Until @web-padawan opening comment data table appeared, I doubt anyone really did that work?

[web-padawan]

One more related issue: https://github.com/vaadin/vaadin-context-menu/issues/253