Admin UIKit - horizontal page scrolling in small viewport widths

[gadgetto]

Short description of the issue

If you resize the browser window to a width of 699px and below, an off canvas area will appear on the right side of the viewport and thus also a horizontal scrolling will be possible. The smaller the viewport the larger the off canvas area.

Expected behavior

No off canvas area should appear. No horizontal scrolling should be possible.

Actual behavior

(see under "Short description")

Optional: Screenshots/Links that demonstrate the issue

Setup/Environment

Tested on: Safari 12, Chrome 71, iOS 12 Safari (iPhone)

Server Details

Software	Version
ProcessWire	3.0.125
PHP	7.2.10
Webserver	Apache
MySQL	5.7.23

Server Settings

Parameter	Value
allow_url_fopen	1
max_execution_time	30 (changeable)
max_input_nesting_level	64
max_input_time	60
max_input_vars	1000
memory_limit	128M
post_max_size	8M
upload_max_filesize	32M
xdebug
xdebug.max_nesting_level
mod_rewrite	1
mod_security	*confirmed off
GD	bundled (2.1.0 compatible)
GIF	1
JPG	1
PNG	1
EXIF Support	1
FreeType	1
Imagick Extension	1

Module Details

Module ClassName	Version
FieldtypeMessageMeta	0.0.1
InputfieldMessageMeta	0.0.1
ProcessGroupMailer	0.0.1
ProcessMessageLister	0.0.1
ProcessTracyAdminer	1.0.6
ProcessWireUpgrade	0.0.7
ProcessWireUpgradeCheck	0.0.7
TracyDebugger	4.17.8

[ryancramerdesign]

@gadgetto I can't duplicate that here. Is it possible it's coming from one of the modules you have installed? Look for any modules that are "autoload" — anything that might be adding markup or scripts to output in the admin. Please let me know if you find what it is.

[gadgetto]

I did a fresh clean install (v3.0.125) - without any modules and I can reproduce the problem. But I have to correct the window size from when the problem occurs: it's about 550px and smaller.

[matjazpotocnik]

I can confirm. It's caused by

#pw-mastheads {
  position: relative;
}

or

.uk-form-width-medium {
  width: 200px;
}

If I reduce 200px to let say 150px the scrollbar is gone and of course, reappears if the screen size is further reduced...

[ryancramerdesign]

I can duplicate it now also at the really low widths, looks like I just didn't test at low enough of a width before. Thanks @matjazpotocnik for finding the issue. I don't want to change the uk form widths, but removing the relative position on #pw-mastheads does seem to solve it, and it doesn't look like we need the relative position. I will test more here before committing just to make sure it's not breaking anything else, but so far seems to resolve it.

[netcarver]

@matjazpotocnik @gadgetto If one of you could verify the fix, I'll close this issue. Many thanks!

[gadgetto]

I can confirm, removing position: relative from #pw-mastheads fixes the problem. I can't say if this has any other impacts. Doesn't seem so at the moment...

[netcarver]

/remind me to review this issue and close if needed in 1 day

[reminders]

@netcarver set a reminder for Feb 15th 2019

[Toutouwai]

The overflow is caused by #pw-masthead being wider than the viewport. It looks like the intention is to hide this element at mobile widths, but setting position: absolute; top: -9999px; is a strange way to hide an element. Setting display: none hides the element without causing the overflow.

I have seen these -9999px positions elsewhere in the PW admin - might be good to scan through and see how many of them could be replaced by a simple display: none.