Page MenuHomePhabricator
Create Task
Maniphest T380471

Content Translation looks broken on desktop in multiple languages (November 21, 2024)
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Description

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

  • Log in to the French Wikipedia.
  • Click the person icon at the top right.
  • Click "Traductions".
  • Click the blue button to start a translation.
  • Select an article to start a translation.

What happens?:

צילום מסך מ־2024-11-21 08-25-59.png (867×1 px, 31 KB)

Most of the screen is blank and some broken narrow letters are seen here and there.

What should have happened instead?:

The content translation interface should appear with visible columns.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Current production Wikimedia.

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

This also happens in Hebrew, Hindi, and some other languages.

Details

SubjectRepoBranchLines /-
Fix layout broken by display:flex on HorizontalLayoutmediawiki/extensions/ContentTranslationREL1_43 7 -3
Fix layout broken by display:flex on HorizontalLayoutmediawiki/extensions/ContentTranslationwmf/1.44.0-wmf.4 7 -3
Fix layout broken by display:flex on HorizontalLayoutmediawiki/extensions/ContentTranslationmaster 7 -3
Customize query in gerrit

Related Objects

Event Timeline

Amire80 created this task.Thu, Nov 21, 1:38 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptThu, Nov 21, 1:38 PM
Amire80 triaged this task as Unbreak Now! priority.Thu, Nov 21, 1:38 PM
abi_ added a project: LPL Essential (LPL Essential 2024 Nov-Dec).Thu, Nov 21, 1:42 PM
AnneT added subscribers: SBisson, AnneT.Thu, Nov 21, 2:18 PM

I'm guessing this change to the horizontal layout is the culprit @Amire80 @SBisson

eamedina subscribed.Thu, Nov 21, 2:22 PM
matmarex subscribed.Thu, Nov 21, 2:23 PM

Hmm, sorry about that. There's probably a simple fix, I'll have a look and propose a patch.

SBisson mentioned this in T375663: 1.44.0-wmf.4 deployment blockers.Thu, Nov 21, 2:27 PM
Nikerabbit moved this task from Needs Triage to Bugs on the ContentTranslation board.Thu, Nov 21, 2:35 PM
Nikerabbit added projects: Unplanned-Sprint-Work, Regression.
abi_ subscribed.Thu, Nov 21, 2:36 PM

The issue is caused due to this change:

HorizontalLayout: Use flexbox to avoid extra vertical margin (Bartosz Dziewoński)

CX uses HorizontalLayout: https://github.com/wikimedia/mediawiki-extensions-ContentTranslation/blob/master/modules/ui/mw.cx.ui.TranslationView.js

gerritbot added a comment.Thu, Nov 21, 2:40 PM

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

[mediawiki/extensions/ContentTranslation@master] Fix layout broken by display:flex on HorizontalLayout

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

gerritbot added a project: Patch-For-Review.Thu, Nov 21, 2:40 PM
matmarex added a comment.Thu, Nov 21, 2:43 PM

This is just a quick workaround. It would be great if you could have a closer look at the various margins and other spacing, and the other places in the code that use HorizontalLayout, and make sure everything looks right. I only know a little about CX myself.

gerritbot added a comment.Thu, Nov 21, 2:46 PM

Change #1093927 had a related patch set uploaded (by Abijeet Patro; author: Bartosz Dziewoński):

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.4] Fix layout broken by display:flex on HorizontalLayout

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

Reedy added a project: MW-1.43-release.Thu, Nov 21, 2:55 PM
gerritbot added a comment.Thu, Nov 21, 3:08 PM

Change #1093925 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Fix layout broken by display:flex on HorizontalLayout

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

gerritbot added a comment.Thu, Nov 21, 3:08 PM

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

[mediawiki/extensions/ContentTranslation@REL1_43] Fix layout broken by display:flex on HorizontalLayout

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

gerritbot added a comment.Thu, Nov 21, 3:23 PM

Change #1093927 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.4] Fix layout broken by display:flex on HorizontalLayout

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

Stashbot added a comment.Thu, Nov 21, 3:24 PM

Mentioned in SAL (#wikimedia-operations) [2024-11-21T15:24:06Z] <kartik@deploy2002> Started scap sync-world: Backport for [[gerrit:1093927|Fix layout broken by display:flex on HorizontalLayout (T380471)]], [[gerrit:1093928|Revert "ExperimentUserDefaultsManager: use read latest when retrieving central id"]]

Stashbot added a comment.Thu, Nov 21, 3:29 PM

Mentioned in SAL (#wikimedia-operations) [2024-11-21T15:29:10Z] <kartik@deploy2002> abi, sgimeno, kartik: Backport for [[gerrit:1093927|Fix layout broken by display:flex on HorizontalLayout (T380471)]], [[gerrit:1093928|Revert "ExperimentUserDefaultsManager: use read latest when retrieving central id"]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

abi_ moved this task from Backlog to Pending Deployment on the LPL Essential (LPL Essential 2024 Nov-Dec) board.Thu, Nov 21, 3:37 PM
Stashbot added a comment.Thu, Nov 21, 3:39 PM

Mentioned in SAL (#wikimedia-operations) [2024-11-21T15:39:58Z] <kartik@deploy2002> Finished scap sync-world: Backport for [[gerrit:1093927|Fix layout broken by display:flex on HorizontalLayout (T380471)]], [[gerrit:1093928|Revert "ExperimentUserDefaultsManager: use read latest when retrieving central id"]] (duration: 15m 51s)

SBisson lowered the priority of this task from Unbreak Now! to High.Thu, Nov 21, 3:44 PM

The issue is fixed but keeping this task open to track further testing and potential fixes to horizontal layouts in CX.

KartikMistry moved this task from Pending Deployment to Done on the LPL Essential (LPL Essential 2024 Nov-Dec) board.Thu, Nov 21, 3:47 PM
ReleaseTaggerBot added a project: MW-1.44-notes (1.44.0-wmf.5; 2024-11-25).Thu, Nov 21, 4:00 PM
gerritbot added a comment.Thu, Nov 21, 5:36 PM

Change #1093932 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@REL1_43] Fix layout broken by display:flex on HorizontalLayout

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

ABreault-WMF moved this task from Blocker to Not a blocker on the MW-1.43-release board.Thu, Nov 21, 5:37 PM
Maintenance_bot removed a project: Patch-For-Review.Thu, Nov 21, 6:30 PM
matmarex added a comment.Thu, Nov 21, 7:45 PM

Thank you for backporting the fix!

abi_ set the point value for this task to 2.Fri, Nov 22, 1:59 PM
abi_ moved this task from Done to Ready for dev on the LPL Essential (LPL Essential 2024 Nov-Dec) board.

Scoping this to make sure that the padding and margins post the fix are the same as before.

Will create a follow up task to evaluate the use of HorizontalLayout

Nikerabbit closed this task as Resolved.Mon, Nov 25, 10:00 AM
Nikerabbit claimed this task.
Nikerabbit mentioned this in T380715: Evaluate use of HorizontalLayout in CX.
Nikerabbit moved this task from Ready for dev to Done on the LPL Essential (LPL Essential 2024 Nov-Dec) board.
Nikerabbit subscribed.

T380715: Evaluate use of HorizontalLayout in CX

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits