Page MenuHomePhabricator

Gallery CSS style got overridden by vector CSS style
Closed, DuplicatePublic

Description

It has been around sometime, but currently the CSS style for the gallery widget is not quite right.

See the attached photo for an explanation. The style for the <ul> element is malfunctioning, which causes a 1.6em left margin (and a 0.3em top margin) that makes each <li> tag (namely, each image) to misalign.

I have looked into this problem half a year ago and found out that the supposed style for this element ( ul.gallery ) was overridden by another style ( .mw-content-rtl ul ). The former was loaded by "mediawiki.page.gallery.styles", and the latter was loaded by "skins.vector.styles.legacy" ( as well as the new desktop design "skins.vector.styles" ). These two CSS selectors have the same specificity, and since the "skins.vector.styles.legacy" is loaded after "mediawiki.page.gallery.styles", the ".mw-content-rtl ul" rule is used.

For a clear view of the impact of this problem, w:zh:WP:每日图片 shows how every image, when inside a table cell, violates the cell bounds.

Screen Shot 2021-09-03 at 11.16.16 PM.png (1×1 px, 1 MB)

Event Timeline

Hi @MilkyDefer ,
I guess I've found the solution for this problem.
We just have to add !important to the property margin in the class ul.gallery.
Thus, ul.gallery will override the other css classes.
See the attached image below

wikieMedia_T290331.jpg (999×1 px, 362 KB)

@Dazzlerkumar: Hi, do you plan to share a patch in Gerrit for this (as you claimed this task)? Thanks. :)

@Aklapper , Hi, Yes I can commit the changes. Please share me the corresponding repo.

@Dazzlerkumar For your !important solution, I think you should check resources/src/mediawiki.page.gallery.styles/gallery.less and resources/src/mediawiki.page.gallery.styles/print.less in mediawiki/core

@Dazzlerkumar: Hi! This task has been assigned to you a while ago. Could you maybe share an update? Do you still plan to work on this task, or do you need any help?

@Dazzlerkumar: I am resetting the assignee of this task because there has not been progress lately (please correct me if I am wrong!). Resetting the assignee avoids the impression that somebody is already working on this task. It also allows others to potentially work towards fixing this task. Please claim this task again when you plan to work on it (via Add Action...Assign / Claim in the dropdown menu) - it would be welcome. Thanks for your understanding!