Update slideout to use mobile styles under 600px viewport width

[gcamacho079]

Description

Resolves DEV-701, DEV-480

Related issues

[linear]

DEV-701 Add an address slideout becomes difficult to use at 320px wide

Page Area:

Address tab - address slideout

Issue Description:

On small/zoomed screens, the form takes up less than half of the viewport width, making the form difficult to use

Action:

Ensure that the form is wider on smaller screens or with higher zoom levels

Screenshot/Code Snippet:

Screen Shot 2022-06-07 at 13.11.34.png

Resolves CMS-241

DEV-480 On 320px screens, slug field in element slideout can no longer be seen or edited

Where: Element edit slideout

The slug field value goes to 0px width on small/zoomed screens

The CSS dynamically calculates this width to be 100% minus a set px value, which ends up falling below zero at this screen size. The CSS should be modified to account for smaller screen sizes

#wwnlayoqwj-slug-field > div.input.ltr

Resolves CMS-131

Screen Shot 2022-04-13 at 10.19.56.png

[brandonkelly]

@gcamacho079 Is there a reason you went with 600px for this?

I was thinking it would be good to move Slideout.js::useMobileStyles() to Craft.js so we can use it for other things as well. But it would be good to be consistent about what we consider a “mobile width”.

Looking through the CSS media queries, looks like the smallest viewport size we check for currently is 500px, when determining whether 25/50%-width fields can be displayed side-by-side:

cms/src/web/assets/cp/src/css/_cp.scss

Lines 1585 to 1591 in 1c7f4ee

	// 2 cols for 500 - 1535px
	@media only screen and (min-width: 500px) and (max-width: $minXlUiWidth - 1px) {
	&.width-25,
	&.width-50 {
	width: 50%;
	}
	}

Do you think we should change that media query to start at 600px, or drop the useMobileStyles() check down to 500px?

[gcamacho079]

Do you think we should change that media query to start at 600px, or drop the useMobileStyles() check down to 500px?

@brandonkelly My rationale here was that at 500px wide, the slideout is only about 250px wide. When I was testing in responsive design mode, 300px seemed like a comfortable minimum width for it.

We could always have the useMobileStyles function use a default parameter of screenWidth = 600, and just override it for the slideout in particular. Or we can stick to 500px across the board 🤔

[brandonkelly]

👍🏻 Went with 600px.