Page MenuHomePhabricator

Modal dialogs that need scrolling extend past bottom of window by 1em on Firefox
Closed, ResolvedPublic

Description

I can't see the bottom of the date text-area in the upload wizard in visual editor, it is cut-off by the bottom of the screen. (Firefox, Ubuntu). Changing the window size doesn't fix it.

Screenshot-Editing User:Quiddity (WMF)-sandbox - Wikipedia - Mozilla Firefox.png (743×1 px, 208 KB)

Event Timeline

Restricted Application added subscribers: Steinsplitter, Aklapper. · View Herald Transcript
matmarex renamed this task from Upload wizard extends past bottom of window to Upload dialog extends past bottom of window.Apr 3 2016, 7:52 PM
matmarex edited projects, added MediaWiki-Uploading; removed UploadWizard.
matmarex subscribed.

I can reproduce with Firefox only. This looks like a bug I've already fixed once…

Change 281718 had a related patch set uploaded (by Bartosz Dziewoński):
Prevent modal windows from exceeding available height on Firefox

https://gerrit.wikimedia.org/r/281718

I was thinking of T122238, and this is indeed related. I don't think we can blame Firefox in this case, our CSS is (like I said on that task) still definitely messed up. We're defining the height of the dialog in three different ways (top+bottom, height and max-height) and expecting the browser to come up with something sane.

  • Firefox decides to ignore the bottom: 1em constraint, keeping top: 1em and max-height: 100%, which results in a dialog taller than available window height, with the bottom cut off.
  • Other browsers I tested decide to ignore both top: 1em and bottom: 1em, which results in a dialog that takes the whole available window height and touches the top and bottom edge.

I don't really want to rewrite how we set dialog sizes (which would probably be a breaking change for some unorthodox uses on dialogs in VE), and it seems we can work around this by setting max-height: calc(100% - 2em);, which is what we really want (to take the whole available window height, minus 1em spacing at top and bottom). calc() is not supported everywhere, so the other browsers will still see max-height: 100% and hopefully do something reasonable.

Before, Firefox
pasted_file (576×1 px, 179 KB)
Before, other browsers
pasted_file (576×1 px, 208 KB)
After
pasted_file (576×1 px, 191 KB)
pasted_file (576×1 px, 164 KB)
matmarex renamed this task from Upload dialog extends past bottom of window to Modal dialogs that need scrolling extend past bottom of window by 1em on Firefox.Apr 5 2016, 6:55 PM
matmarex edited projects, added OOUI; removed MediaWiki-Uploading, Multimedia, VisualEditor.
matmarex triaged this task as Medium priority.Apr 5 2016, 10:01 PM

@matmarex, how do you test OOUI changes like this directly with mw core?

I cheated and just changed the CSS directly in the developer tools this time. :)

Change 281718 merged by jenkins-bot:
Prevent modal windows from exceeding available height on Firefox

https://gerrit.wikimedia.org/r/281718