Page MenuHomePhabricator

Full screen dialogs are truncated by scrollbar gutter
Closed, ResolvedPublic

Assigned To
Authored By
Feb 22 2024, 5:00 PM
Referenced Files
F42647499: screenshot.png
Mar 15 2024, 3:38 PM
F42045578: image.png
Feb 22 2024, 5:04 PM
F42045496: image.png
Feb 22 2024, 5:00 PM
"Burninate" token, awarded by IKhitron.


  1. Open http://localhost/oojs/ui/demos/?page=dialogs&theme=wikimediaui&direction=ltr&platform=desktop on a platform that uses real scrollbars (i.e. not MacOS with default settings).
  2. Open "Process dialog (full)"
  3. Observe the right of the dialog has been truncated:

image.png (100×111 px, 1 KB)

This appears to be caused by our recent switch to scrollbar-gutter: stable in

Event Timeline

Real world example of full screen dialogs is the kartographer extension:

image.png (259×345 px, 84 KB)

This issue only appears to affect Chrome. Firefox works fine.

Looks like this is reported as, which may also be the same as

Fullscreen dialogs with a scrollbar-gutter look pretty weird even in the correct rendering, actually. Maybe we could try to turn off the gutter when displaying a fullscreen dialog, but the transition between fullscreen and non-fullscreen would probably be janky… I found a recent discussion about the spec that also complains about this situation:

Given the age of those issues we shouldn't expect them to be fixed any time soon.

scrollbar-gutter is supposed to be one of the things browser makers want to work in 2024: so I would say there's a chance.

Change 1008863 had a related patch set uploaded (by Esanders; author: Esanders):

[oojs/ui@master] WindowManager: Don't use scrollbar-gutter in fullscreen mode

My attention was drawn to this bug after I saw this, when moving the help icon to its appropriate place:

screenshot.png (1×1 px, 594 KB)

I made a very stupid fix for now, from

		display: 'flex',
		justifyContent: 'center',
		alignItems: 'center'


		display: 'flex',
		justifyContent: ($.client.profile().name === 'chrome' ? 'left' : 'center'),
		alignItems: 'center'

Change 1008863 merged by jenkins-bot:

[oojs/ui@master] WindowManager: Don't use scrollbar-gutter in fullscreen mode

Change #1017120 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update OOUI to v1.2.34

Change #1017120 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.49.1

matmarex assigned this task to Esanders.
matmarex removed a project: Patch-For-Review.