Page MenuHomePhabricator

Buttons in overlay header are not full height
Closed, ResolvedPublic0 Estimated Story Points

Description

This has regressed since switching to Codex CSS:
Language selector:

image.png (181×260 px, 9 KB)

VE loading:
image.png (181×260 px, 19 KB)

Standard buttons have a height of 44px (2.75em) whereas the toolbar is 48px (3em) tall. This is the case in OOUI too. Any change to this would need to be fixed across a variety of implementations, so for now I suggest we just fix the regression.

QA Results - Prod

ACStatusDetails
1T343995#9132621

Event Timeline

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

[mediawiki/skins/MinervaNeue@master] Fix the height of cdx-button in header-overlay

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

Change 947347 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Fix the height of cdx-button in header-overlay

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

Jdlrobson set the point value for this task to 0.

Status:❓Need More Info
Environment: beta
OS: macOS Ventura
Browser: Safari 16.6, Chrome 115
Device: MBP

Apologies I'm a little unsure what size I should be confirming...

In any case, I noticed some inconsistencies between Safari and Chrome for the same element in the inner-most (blue) computed box model diagram:

iPhone 8 Plus
SafariChrome
iphone 8 plus - safari.png (3×2 px, 1 MB)
20x42
iphone 8 plus - chrome.png (3×2 px, 2 MB)
20x46
iPad Mini
SafariChrome
ipad mini - safari.png (3×2 px, 1 MB)
20x42
ipad mini - chrome.png (3×2 px, 2 MB)
20x46

Also of note, on Safari on iPad there is a space to the left of the close button which is not present on the others:

ipad mini space - safari.png (3×2 px, 2 MB)

Mhurd updated the task description. (Show Details)
Mhurd subscribed.
Mhurd updated the task description. (Show Details)
Jdlrobson added subscribers: bwang, Jdlrobson.

@Mhurd I was unable to replicate this. For me they always show as 44x44. Is what you are seeing consistent with the code on production (e.g. are the widths the same on https://en.m.wikipedia.org/wiki/Battle_of_Dupplin_Moor#/languages)? If so then it's likely an existing bug.

It sounds like we should likely create a ticket for this. I'm going to be out next week, so @bwang could you work with Monte to get a task setup once we can replicate it? Thanks in advance!

@Jdlrobson @bwang I could replicate the issue that @Mhurd was having regarding the padding. I also recreated this issue regarding the space to the left of the close button for Ipad mini only in landscape mode. Portrait mode does not have the spacing left of the close button. Did you still want to move this ticket along and have a different task created or did you want to have the issues below resolved first?

Status:
Environment: Patch Demo
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA
Test Links:
Beta: https://en.m.wikipedia.beta.wmflabs.org/wiki/Barack_Obama#/languages
PROD: https://en.m.wikipedia.org/wiki/Barack_Obama#/languages

Different Padding- Device used: Iphone 8 via Developer tools
Safari Beta is 20x42 just like PROD. Chrome and Firefox are 20x46 in Beta but 20x42 in PROD.

EnvironmentSafariChromeFirefox
Beta
T343995_LanguageIcon_Minerva1.png (1×1 px, 302 KB)
T343995_LanguageIcon_Minerva2.png (1×3 px, 335 KB)
T343995_LanguageIcon_Minerva3.png (873×2 px, 246 KB)
PROD
T343995_LanguageIcon_Minerva4.png (1×1 px, 326 KB)
T343995_LanguageIcon_Minerva5.png (1×3 px, 353 KB)
T343995_LanguageIcon_Minerva6.png (877×2 px, 267 KB)

Ipad Mini Landscape- There is a space left to the close button, not just Safari but also Firefox and Chrome. This only happens in landscape mode for Beta but also PROD, as seen in the chrome screenshot below. In portrait mode, it does not have the spacing as landscape does.

Beta-SafariBeta-FirefoxPROD-Chrome
T343995_LanguageIcon_MinervaIpad1.png (921×1 px, 103 KB)
T343995_LanguageIcon_MinervaIpad4.png (545×1 px, 74 KB)
T343995_LanguageIcon_MinervaIpad2.png (642×830 px, 50 KB)

Ipad Min Portrait Does not have the spacing to the left in this mode for Beta and PROD like landscape.

Beta-SafariPROD-Safari
T343995_LanguageIcon_MinervaIpad5.png (905×1 px, 75 KB)
T343995_LanguageIcon_MinervaIpad6.png (905×1 px, 54 KB)

@GMikesell-WMF @Mhurd
I can replicate the difference between Safari and Chrome/Firefox, however I think that should be a different ticket, it seems to be an existing issue.
The padding issue is also an existing issue. To replicate it, you need a viewport around 1000px to 1200px. It doesnt actually depend on the device, in that small range of viewports there will be extra padding on the left of the overlay title in the language overlay.

I think this task can pass QA

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Ventura
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Set to 3em high, like mw-ui-button.

Screenshot 2023-08-30 at 6.45.10 PM.png (1×1 px, 680 KB)

Screenshot 2023-08-30 at 6.42.20 PM.png (1×877 px, 239 KB)

Screenshot 2023-08-30 at 6.38.39 PM.png (1×874 px, 259 KB)