fix: update media query to work with larger phones

[DiegoCardoso]

Description

Update the media query that sets the overlay to show on the bottom of the page to work with larger phones, such as the iPhone Pro Max.

For such devices, this current media query is not met leading to the menu overlay being opened at the top-left corner of the screen.

Before

After

Fixes #8092

Type of change

• Bugfix
• Feature

[web-padawan]

I guess this should be then also updated in other places e.g. vaadin-select might have the same problem?

[DiegoCardoso]

I guess this should be then also updated in other places e.g. vaadin-select might have the same problem?

vaadin-select uses the same style, so it was covered. But I checked for other elements, and vaadin-date-picker should be updated as well as it was looking a bit broken after this change:

Before

After the change only on the menu-overlay styles

After updating the media query in vaadin-date-picker

I also updated media queries in the notification

[tomivirkki]

Wouldn't incresing the thresholds just postpone the problem until someone tries with a bit larger device?

[DiegoCardoso]

Wouldn't incresing the thresholds just postpone the problem until someone tries with a bit larger device?

That's true. I wasn't able to find a value that would work for most of phones with large screens. One option would be to align the media query, in this case, with the threshold value for the media query used in the context menu to define whether a touch device is a phone or not:

web-components/packages/context-menu/src/vaadin-context-menu-mixin.js

Lines 125 to 130 in c673dc2

	_wideMediaQuery: {
	type: String,
	value: '(min-device-width: 750px)',
	},
	};
	}

The problem now happens with devices that are in between the current 420px and this 750px mentioned on the code above.

[tomivirkki]

Maybe it would make sense to align the context menu's behavior with the other components and instead of the current _wideMediaQuery, use the same _fullscreenMediaQuery that for example date-picker has. _touch could probably also be removed because the resulting _phone is computed from !wide && touch

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[DiegoCardoso]

Maybe it would make sense to align the context menu's behavior with the other components and instead of the current _wideMediaQuery, use the same _fullscreenMediaQuery that for example date-picker has. _touch could probably also be removed because the resulting _phone is computed from !wide && touch

I aligned the phone detection as suggested.

At the same time, I increased the breakpoint to 450px in a few places as this would be enough to accommodate most phones (on my tests, the widest phone - Google Pixel 9 Pro XL - has a width of 448px). It was discussed internally to, at least, do this bump for now and return #83 as part of the next major release (where we can define a better breakpoint system and, perhaps, replace some @media with @container queries).

I decided to rollback changes in notification that I had done previously as it was not directly affected by the changes done as part of this PR.