Page MenuHomePhabricator

Wrong padding for galleries
Closed, ResolvedPublicBUG REPORT

Description

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

What happens?:

Uneven gaps. Specifically left padding is too large on mobile. Seems to vary between skins.

What should have happened instead?:

Should have symmetric gaps (paddings & margins).

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

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

Example gallery (https://species.m.wikimedia.org/w/index.php?title=Template:MP_pictures&oldid=9072274):

obraz.png (1×1 px, 493 KB)

I fixed this for the main page, but that should be fixed upstream.
https://species.m.wikimedia.org/wiki/Main_Page
https://species.wikimedia.org/w/index.php?title=Template:MP/styles.css&oldid=9072279#L-59

Rule that should be setting margin&padding for galleries (but is overridden):

ul.gallery {
 margin:2px;
 padding:2px;
 display:block
}

This rule overrides above on mobile:

.content ul {
 list-style-type:disc;
 padding-left:1em
}

On desktop problematic rule is even more specific:

	.mw-content-ltr ul,
	.mw-content-rtl .mw-content-ltr ul {
	  /* @noflip */
	  margin: 0.3em 0 0 1.6em;
	  padding: 0;
	}

Event Timeline

I think it would be reasonable to just boost the specificity of the ul.gallery selector, e.g. using ul.gallery.gallery.gallery, so that it overrides the other rule. It's not a pretty solution, but it seems to me like the alternatives are worse. In the long term, perhaps someone will solve T38755: gallery should not use ul/li and this hack can go away.

Change 883599 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/core@master] Fix padding of galleries

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

Change 883599 merged by jenkins-bot:

[mediawiki/core@master] Fix padding of galleries

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

The fix will be deployed to Wikimedia wikis next week, per the usual schedule.

I'm meaning it's since the fix deployment. The gallery parameter perrow breaks all div containers:

<div class="center" style="text-align=center;">
<gallery class="center centered" perrow="2">
Test.svg|Test
Test.svg|Test
Test.svg|Test
Test.svg|Test
</gallery>
</div>

IMHO the gallery has been centered before the fix, but I'm not very sure. Now, the gallery is left aligned. And I didn't find any clue to center a gallery with parameter perrow.

Has the fix anything to do with this?

Yeah, that may be related. The markup you used looks very weird to me though…

The following should still work:

<gallery perrow="2" style="margin: 0 auto;">
Test.svg|Test
Test.svg|Test
Test.svg|Test
Test.svg|Test
</gallery>

Yeah, now that this was fixed, other selectors that reference galleries have to be much more specific, e. g.:
https://ru.wikipedia.org/wiki/MediaWiki:Common.css#L-159
https://ru.wikipedia.org/wiki/Муха,_Альфонс#Галерея

I think this change should’ve been announced somewhere.