mw.util.addPortlet() dropdown menu has unexpected border and too much padding
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Novem_Linguae
	Dec 12 2023, 12:32 AM

Description

Steps to replicate the issue (include links if applicable):

open javascript console
type this and press enter:

mw.util.addPortlet('p-twinkle', 'TW', '#p-cactions');
mw.util.addPortletLink('p-twinkle', '#', 'Tag');
mw.util.addPortletLink('p-twinkle', '#', 'CSD');
mw.util.addPortletLink('p-twinkle', '#', 'XFD');

What happens?:

unexpected interior black border

mw-list-item padding much greater than other elements in Vector 2022 skin

bottom of dropdown list has too much padding

What should have happened instead?:

no border
line height similar to other items in Vector 2022 skin
top and bottom padding of the dropdown menu should be identical, for symmetry (currently too much on top and bottom)

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Related Objects

Mentioned In: T353905: Reconsider vertical padding on dropdown menus
Mentioned Here: T353905: Reconsider vertical padding on dropdown menus

Event Timeline

Novem_Linguae created this task.Dec 12 2023, 12:32 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 12 2023, 12:32 AM

Novem_Linguae updated the task description. (Show Details)Dec 12 2023, 12:32 AM

Novem_Linguae updated the task description. (Show Details)Dec 12 2023, 12:40 AM

ovasileva added a project: Web-Team-Backlog (FY2023-24 Q2 Sprint 5).Dec 12 2023, 7:46 AM

ovasileva subscribed.

Qwerfjkl subscribed.Dec 12 2023, 10:03 AM

Looks like this can be fixed from the Twinkle side of things. Luckily I think it's a matter of just deleting these last two selectors: https://github.com/wikimedia-gadgets/twinkle/blob/master/twinkle.css#L46

https://github.com/wikimedia-gadgets/twinkle/pull/1906

Hopefully now Twinkle is using addPortlet these kind of hot fixes wont be necessary going forward.

Yes, Twinkle was switched to mw.util.addPortlet :)

Thanks for the patch Jan. Will test and merge it later today.

MoreMenu has the same problematic hotfix code that needs to be deleted. I'll file a PR for that later today unless you get to it first.

https://github.com/wikimedia-gadgets/MoreMenu/blob/aa0ed9b53ebe1632d12d23f20d0f4c8f8098e39a/src/MoreMenu.js#L409-L415

I'm working on MoreMenu now. It's a bit different because it has custom HTML for the menu items, as well as the submenus. Just removing the hotfix CSS gives us this:

Screenshot from 2023-12-12 21-18-13.png (610×559 px, 62 KB)

which I think is worse than the way it looks now.

I hope to have this all fixed within the next few hours.

Looks much better. Thanks for the patch Jan.

Any chance we can fix the upper and lower padding with a patch to Vector? I think visually it would make the most sense if the padding in all 4 directions was 16px exactly. Right now there seems to be extra padding on the top (22px total), and extra padding and margin on the bottom (23.4px total). This is in safe mode, so it's not Twinkle styling.

2023-12-12_184101.png (382×212 px, 15 KB)

Novem_Linguae updated the task description. (Show Details)Dec 13 2023, 2:45 AM

In T353214#9401800, @Novem_Linguae wrote:

…
Any chance we can fix the upper and lower padding with a patch to Vector? I think visually it would make the most sense if the padding in all 4 directions was 16px exactly. Right now there seems to be extra padding on the top (22px total), and extra padding and margin on the bottom (23.4px total).

Yeah, I was going to hide that with:

.vector-dropdown-content::after {
    display: none !important;
}

However I'm prefixing the selector with the MoreMenu ID, so as to not effect the native menus.

I can't gather what this pseudoelement is even for, but I agree that it looks off.

Jan's Twinkle patch is merged and deployed. However, I am getting even more padding at the bottom on enwiki than I was in my dev environment/on testwiki. This is with &debug=1 and a browser hard refresh+clear cache. Yeah, appears to be the ::after tag that MusikAnimal mentioned.

I wonder why testwiki is acting different. Testwiki skins being out of sync with enwiki may be worth a ticket if we can figure out the issue.

MoreMenu is now fixed and is now using mw.util.addPortlet.

I hid the pseudoelement mentioned above, and also moved up the menu itself to match the vertical positioning of the "Tools" menu. It seems Twinkle has the same problem with that, too:

Screenshot from 2023-12-12 22-40-14.png (227×379 px, 14 KB)

Screenshot from 2023-12-12 22-40-21.png (227×379 px, 14 KB)

For MoreMenu, I just eyeballed a hacky fix with:

.vector-dropdown-content {
    top: 35px !important;
}

I'm unable to reproduce the disconnected menu issue. Got a steps to reproduce?

In your screenshot, the gap between TW and the <hr> looks bigger than in mine. Perhaps a user script or gadget is creating that space?

In T353214#9401863, @Novem_Linguae wrote:

I'm unable to reproduce the disconnected menu issue. Got a steps to reproduce?
…

My mistake. It turns out it was the MoreMenu peer gadget. I need to fix that anyway for Vector 2022.

Please disregard!

I wonder why testwiki is acting different. Testwiki skins being out of sync with enwiki may be worth a ticket if we can figure out the issue.

Test wiki is on 1.42.0-wmf.9 and enwiki on 1.42.0-wmf.7 so it's possible a bug in the 1.42.0-wmf.7 branch?

Frostly subscribed.Dec 14 2023, 6:37 AM

ovasileva triaged this task as Medium priority.Dec 18 2023, 6:34 PM

Seems to be working now @Novem_Linguae - let us know if there's anything else here that we can help with.

I'm seeing padding of 16px on all sides. Could you share more information? (If you can use https://www.replay.io/ that would also help us diagnose this quicker)

Screenshot 2023-12-18 at 12.24.32 PM.png (1×1 px, 287 KB)

Jdlrobson claimed this task.Dec 19 2023, 5:48 PM

You successfully reproduced it. I see it in your screenshot. Please note the whitespace above CSD and below Config. Hope that helps!

This is a lineheight issue.

Screenshot 2023-12-19 at 20.13.32.png (530×1 px, 336 KB)

The a element in the menu has 6px padding on the vertical axis. Which means that you effectively have 6+16 px of padding at the start and the end of the menu

Thanks all. I've created T353905 to capture the bug to make sure we talk about it in the new year. Please feel free to adjust/comment on that ticket if I have miscaptured anything.

TheDJ attached a referenced file: F41613642: Screenshot 2023-12-19 at 20.13.32.png. (Show Details)Dec 22 2023, 11:53 PM

	F41613642: Screenshot 2023-12-19 at 20.13.32.png
	Dec 19 2023, 7:15 PM

	F41611728: Screenshot 2023-12-18 at 12.24.32 PM.png
	Dec 19 2023, 5:48 PM

	F41597713: Screenshot from 2023-12-12 22-40-21.png
	Dec 13 2023, 3:42 AM

	F41597712: Screenshot from 2023-12-12 22-40-14.png
	Dec 13 2023, 3:42 AM

	F41597745: image.png
	Dec 13 2023, 3:47 AM

	F41597689: image.png
	Dec 13 2023, 3:37 AM

	F41597687: image.png
	Dec 13 2023, 3:37 AM

	F41597681: image.png
	Dec 13 2023, 3:37 AM

mw.util.addPortlet() dropdown menu has unexpected border and too much paddingClosed, ResolvedPublicBUG REPORTActions

Description

Related Objects

Event Timeline

mw.util.addPortlet() dropdown menu has unexpected border and too much padding
Closed, ResolvedPublicBUG REPORT
Actions