Page MenuHomePhabricator

Special:Translate filter box magnifying glass overlaps with placeholder in RTL UI
Closed, ResolvedPublic1 Estimated Story Points

Description

Special:Translate filter box magnifying glass overlaps with placeholder in RTL UI.

To reproduce, go to https://translatewiki.net/w/i.php?title=Special:Translate&group=phabricator-phabricator-maniphest&language=he&filter=%21translated&action=translate&uselang=he and look at the filter box on the top left of the message list.

This probably got broken in https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Translate/+/669536/3/resources/css/ext.translate.special.translate.css#194 .

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Actually the whole thing should be right-aligned, shouldn’t it?

How it looks like in EnglishHow it looks like in Hebrew right nowHow I’d expect it to look like in Hebrew
Screenshot_2021-05-24 Translate - translatewiki net.png (28×244 px, 1 KB)
Screenshot_2021-05-24 תרגום – translatewiki net.png (28×244 px, 1 KB)
Screenshot_2021-05-24 תרגום – translatewiki net(2).png (28×244 px, 1 KB)

(Maybe the magnifier should be mirrored as well; I don’t know.)

To achieve the above, I added the CSS

.tux-message-filter-box {
	background-position: right 8px center;
}

(actually CSSJanus should have done this, so this part seems to be an upstream bug), and added the attribute dir="rtl" to the <input> element.

Change 948554 had a related patch set uploaded (by Nikerabbit; author: Nikerabbit):

[mediawiki/extensions/Translate@master] Special:Translate Fix message search icon positioning

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

Change 948554 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Special:Translate Fix message search icon positioning

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

Test status: QA PASS

manifying glass no longer overlaps with the place holder text

Nikerabbit set the point value for this task to 1.Aug 31 2023, 8:33 AM