⚓ T260115 Compare the contents: Responsive adaptations for larger screens

⚓ T260115 Compare the contents: Responsive adaptations for larger screens
Page Menu
Phabricator
Create Task
Maniphest
T260115
Compare the contents: Responsive adaptations for larger screens
Closed, Resolved
Public
Actions
Edit Task
Edit Related Tasks...
Create Subtask
Edit Parent Tasks
Edit Subtasks
Merge Duplicates In
Close As Duplicate
Edit Related Objects...
Edit Commits
Edit Mocks
Mute Notifications
Protect as security issue
Assigned To
SBisson
Authored By
Pginer-WMF
Aug 11 2020, 9:27 AM
2020-08-11 09:27:24 (UTC+0)
Tags
LPL Hypothesis
(Product Signoff)
MW-1.44-notes (1.44.0-wmf.27; 2025-04-29)
MW-1.45-notes (1.45.0-wmf.4; 2025-06-03)
ContentTranslation
(Translation editor)
Referenced Files
F62355432: 2025-06-16_15-02-22.mp4.gif
Jun 16 2025, 10:04 PM
2025-06-16 22:04:14 (UTC+0)
F62355356: 2025-06-16_14-32-38.png
Jun 16 2025, 10:04 PM
2025-06-16 22:04:14 (UTC+0)
F62355351: 2025-06-16_14-36-19.png
Jun 16 2025, 10:04 PM
2025-06-16 22:04:14 (UTC+0)
F62355348: 2025-06-16_14-41-35.png
Jun 16 2025, 10:04 PM
2025-06-16 22:04:14 (UTC+0)
F62355328: 2025-06-16_14-52-27.mp4.gif
Jun 16 2025, 10:04 PM
2025-06-16 22:04:14 (UTC+0)
F60803698: ko.m.wikipedia.org_wiki_%EA%B5%AC%EB%AF%B8%EB%B2%A0%EC%96%B4.png
May 29 2025, 12:56 PM
2025-05-29 12:56:17 (UTC+0)
F60803695: en.m.wikipedia.org_wiki_Gummy_bear.png
May 29 2025, 12:56 PM
2025-05-29 12:56:17 (UTC+0)
F60564826: Kapture 2025-05-26 at 13.30.47.webm
May 26 2025, 12:27 PM
2025-05-26 12:27:43 (UTC+0)
View All 24 Files
Subscribers
Aklapper
GMikesell-WMF
ngkountas
Nikerabbit
Pginer-WMF
Description
The "Compare the contents before translating" step (
T241589
) in the Section Translation workflow is intended to be supported on both mobile and desktop. Although the initial scope is to support the mobile layout, responsive adjustments will be added for it to better fit larger screens.
Specific details on how to support each component are available in the parent task:
T241589: Section Translation: Compare the contents before translating
Related:
T259689: Orchestrate the workflow in responsive manner
Derived Requirements
Ensure section navigation controls ('<' and '>') remain visible and accessible in narrow screen views, even when section titles are long.
Ensure long section titles in narrow screens either wrap to a new line or are truncated using ellipsis, without breaking layout.
Ensure the tab layout for source and target article previews maintains visual grouping on narrow screens (wrapping occurs within tab labels, not across the entire tab set).
Prevent inconsistent styling (e.g., flickering or font weight changes) when switching between language tabs for article and section titles.
Test Steps
Test Case 1: Ensure Navigation Controls Are Visible with Long Section Titles
Open Special\:ContentTranslation in Minerva skin using a narrow viewport (e.g., iPhone SE).
Select a page with a long section title (e.g., "Gummy bear" > "Ingredients and production").
Observe the placement of section navigation controls ('<' and '>').
✅❓❌⬜
AC1:
Section navigation controls remain visible and accessible without overflowing the viewport.
Test Case 2: Ensure Section Title Wrapping or Truncation on Narrow Screens
Test Case 2: Ensure Section Title Wrapping and tab grouping on Narrow Screens
Use the same setup as Test Case 1.
Observe how the long section title is rendered at the top of the translation view.
✅❓❌⬜
AC2:
Long section titles either wrap to the next line and tabs are visually grouped without affecting layout integrity.
Test Case 3: Ensure Stable Styling When Switching Language Tabs
In ContentTranslation, toggle between English and the target language tabs for a given section.
Watch the article and section titles for any flickering or font weight changes.
✅❓❌⬜
AC3:
Font weight and styling of the article and section titles remain consistent when switching tabs.
QA Results - Test Wiki
AC
Status
Details
T260115#10920754
T260115#10920754
T260115#10920754
Details
Other Assignee
GMikesell-WMF
Related Changes in Gerrit:
Subject
Repo
Branch
Lines +/-
CX3 Build 1.0.0+20250602
mediawiki/extensions/ContentTranslation
master
+3 K
-3 K
Compare content: handle overflowing article/section titles
mediawiki/extensions/ContentTranslation
master
+12
-3
CX3 Build 1.0.0+20250428
mediawiki/extensions/ContentTranslation
master
+4 K
-4 K
Compare content: responsive adaptation for desktop
mediawiki/extensions/ContentTranslation
master
+5
-10
Customize query in gerrit
Related Objects
Search...
Task Graph
Mentions
Status
Subtype
Assigned
Task
Open
None
T243495
[Epic] Support for Section Translation
Open
None
T241589
Section Translation: Compare the contents before translating
Resolved
SBisson
T260115
Compare the contents: Responsive adaptations for larger screens
Mentioned In
T386696: Compare contents header: Spacing doesn't follow design specifications on desktop
T259689: Orchestrate the workflow in responsive manner
Mentioned Here
T398040: Compare contents: article and section titles style flickering
T268428: Unwanted line break in content header of "Compare contents" step
T241589: Section Translation: Compare the contents before translating
T259689: Orchestrate the workflow in responsive manner
Event Timeline
Pginer-WMF
created this task.
Aug 11 2020, 9:27 AM
2020-08-11 09:27:24 (UTC+0)
Pginer-WMF
removed
ngkountas
as the assignee of this task.
Aug 11 2020, 12:29 PM
2020-08-11 12:29:32 (UTC+0)
Pginer-WMF
triaged this task as
Medium
priority.
Pginer-WMF
removed a project:
Language-Team (Language-2020-July-September)
Pginer-WMF
moved this task from
Backlog
to
Core workflow
on the
SectionTranslation
board.
Aug 11 2020, 1:18 PM
2020-08-11 13:18:52 (UTC+0)
Pginer-WMF
mentioned this in
T259689: Orchestrate the workflow in responsive manner
Sep 14 2020, 8:48 AM
2020-09-14 08:48:19 (UTC+0)
Pginer-WMF
added a project:
LPL Hypothesis
Mar 5 2025, 3:20 PM
2025-03-05 15:20:41 (UTC+0)
Pginer-WMF
mentioned this in
T386696: Compare contents header: Spacing doesn't follow design specifications on desktop
Mar 5 2025, 4:12 PM
2025-03-05 16:12:34 (UTC+0)
PWaigi-WMF
moved this task from
Backlog
to
Prioritized
on the
LPL Hypothesis
board.
Mar 25 2025, 10:31 AM
2025-03-25 10:31:53 (UTC+0)
PWaigi-WMF
moved this task from
Prioritized
to
Incoming
on the
LPL Hypothesis
board.
Apr 12 2025, 9:58 AM
2025-04-12 09:58:56 (UTC+0)
SBisson
claimed this task.
Apr 16 2025, 5:57 PM
2025-04-16 17:57:39 (UTC+0)
SBisson
moved this task from
Incoming
to
In-progress
on the
LPL Hypothesis
board.
gerritbot
added a comment.
Apr 17 2025, 12:33 PM
2025-04-17 12:33:36 (UTC+0)
Comment Actions
Change #1137279 had a related patch set uploaded (by Sbisson; author: Sbisson):
[mediawiki/extensions/ContentTranslation@master] Compare content: responsive adaptation for desktop
gerritbot
added a project:
Patch-For-Review
Apr 17 2025, 12:33 PM
2025-04-17 12:33:37 (UTC+0)
SBisson
added a comment.
Apr 17 2025, 12:37 PM
2025-04-17 12:37:30 (UTC+0)
Comment Actions
@Pginer-WMF
here's some screenshots from the patch above:
mobile
tablet
desktop
SBisson
moved this task from
In-progress
to
Needs Code Review
on the
LPL Hypothesis
board.
Apr 17 2025, 12:38 PM
2025-04-17 12:38:06 (UTC+0)
gerritbot
added a comment.
Apr 23 2025, 8:48 PM
2025-04-23 20:48:56 (UTC+0)
Comment Actions
Change #1137279
merged
by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Compare content: responsive adaptation for desktop
ReleaseTaggerBot
added a project:
MW-1.44-notes (1.44.0-wmf.27; 2025-04-29)
Apr 23 2025, 9:00 PM
2025-04-23 21:00:12 (UTC+0)
Maintenance_bot
removed a project:
Patch-For-Review
Apr 23 2025, 9:31 PM
2025-04-23 21:31:03 (UTC+0)
SBisson
moved this task from
Needs Code Review
to
Pending deployment
on the
LPL Hypothesis
board.
Apr 24 2025, 1:38 AM
2025-04-24 01:38:26 (UTC+0)
Pginer-WMF
added a comment.
Apr 24 2025, 7:46 AM
2025-04-24 07:46:46 (UTC+0)
Comment Actions
In
T260115#10751721
@SBisson
wrote:
@Pginer-WMF
here's some screenshots from the patch above:
mobile
tablet
desktop
In the screenshots I noticed a duplicate part where the section title and button to translate appear again (highlighted below). We can remove this part since that info and function is already provided at the top of the screen:
The rest of the elements adapt to screen size as expected.
SBisson
added a comment.
Apr 24 2025, 12:48 PM
2025-04-24 12:48:59 (UTC+0)
Comment Actions
@Pginer-WMF
I don't know what was going on when I took those screenshots... Here's a new set from the main branch after the patch was merged:
mobile
tablet
desktop
gerritbot
added a comment.
Apr 28 2025, 5:55 PM
2025-04-28 17:55:24 (UTC+0)
Comment Actions
Change #1139523 had a related patch set uploaded (by Eamedina; author: Eamedina):
[mediawiki/extensions/ContentTranslation@master] CX3 Build 1.0.0+20250428
gerritbot
added a project:
Patch-For-Review
Apr 28 2025, 5:55 PM
2025-04-28 17:55:25 (UTC+0)
gerritbot
added a comment.
Apr 28 2025, 7:47 PM
2025-04-28 19:47:51 (UTC+0)
Comment Actions
Change #1139523
merged
by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] CX3 Build 1.0.0+20250428
Maintenance_bot
removed a project:
Patch-For-Review
Apr 28 2025, 8:31 PM
2025-04-28 20:31:33 (UTC+0)
ngkountas
moved this task from
Pending deployment
to
Needs QA
on the
LPL Hypothesis
board.
May 2 2025, 4:39 PM
2025-05-02 16:39:38 (UTC+0)
GMikesell-WMF
updated Other Assignee, added:
GMikesell-WMF
May 13 2025, 7:16 PM
2025-05-13 19:16:36 (UTC+0)
GMikesell-WMF
updated the task description.
(Show Details)
GMikesell-WMF
subscribed.
May 13 2025, 7:31 PM
2025-05-13 19:31:12 (UTC+0)
Comment Actions
@SBisson
Functionalities work as designed, but there were a few cosmetic issues. I know some you told me to ignore but not sure if these are part of it. Also review the new section gif if it matter or not when you have a free moment, thanks!
Test Result - Test
Status:
❓Need More Info
Environment:
beta/testwiki
OS:
macOS Sequoia 15.4.1
Browser:
Chrome 135
Device:
MBA
Emulated Device:
NA
Test Artifact(s):
Test Steps
Test Case 1: Ensure responsive layout for #Compare the contents step on desktop
Open the CX unified dashboard on a desktop browser.
Select an existing article to translate.
Proceed to the "Compare the contents before translating" step.
AC1:
Confirm that the layout adapts to the larger screen (e.g., side-by-side column layout or adjusted padding/margins) per the design mocks in
T241589
Top 2 headers are not aligned
Different texts compared to "Review the contents in both languages"
Section heads are both bold
Selector Area has no background color
Not sure if you want the space increased more with all the texts to the boarder just like what is shown in
T241589
or if it's ok on how it is now.
Test Case 2: Ensure visual consistency between mobile and desktop responsive breakpoints
Resize the browser window to transition between mobile and desktop widths.
AC2:
Confirm that the component layout smoothly adjusts between breakpoints, maintaining readability and visual consistency with the design specs.
Different texts compared to "Review the contents in both languages"
Section heads are both bold
Selector Area has no background color
❓Potential Issue- Does "The new section will be added here once you complete the translation" always appear in the same section, no matter which one I pick?
GMikesell-WMF
updated the task description.
(Show Details)
May 13 2025, 7:32 PM
2025-05-13 19:32:19 (UTC+0)
GMikesell-WMF
moved this task from
Needs QA
to
In-progress
on the
LPL Hypothesis
board.
SBisson
moved this task from
In-progress
to
Design Signoff
on the
LPL Hypothesis
board.
May 21 2025, 7:54 PM
2025-05-21 19:54:43 (UTC+0)
Comment Actions
I'll let
@Pginer-WMF
evaluate the visual differences between the current state of the Compare content screen with the mock ups in this task.
Pginer-WMF
added a comment.
May 26 2025, 12:27 PM
2025-05-26 12:27:43 (UTC+0)
Comment Actions
Overall, the adjustment looks good. The only issues I detected is with very narrow screens (please, let me know if separate tickets are preferred for these based on technical complexity).
I also checked the styling issue mentioned, but that seems a separate issue (more details below).
Navigation control in narrow screens
Long section titles in narrow screens (
example
) result in the section navigation controls ("<" and ">") to become pushed too far out of the viewport:
Current state
Wrapping to a new line
Cropping with ellipsis
Wrapping into a new line or using ellipsis are acceptable solutions. The use of ellipsis seems ok in this context, given that the section may have been selected from the previous menu and the title is visible in full also below in the previewed contents.
Tabs in narrow screens
On narrow screens the tabs that allow users to preview the selected section in the source language and the full article int he target one can break into two separate lines. This makes the UI element harder to identify as a set of tabs. A different wrapping approach where the wrapping taes place at the tab labels instead would preserve the overall tab structure aligned. This is illustrated below:
Current
Proposed
Styling flickering
Styling of article and section title change for different tabs. In the video below, I have been switching between the English and Korean tabs, and the article and section titles on top keep switching their font weight as a result, which is unexpected. This seems a separate issue about better isolating the CSS from the contents displayed.
SBisson
added a comment.
May 29 2025, 12:56 PM
2025-05-29 12:56:17 (UTC+0)
Comment Actions
In
T260115#10856542
@Pginer-WMF
wrote:
[...]
Navigation control in narrow screens
Yes, this is a bug in the responsible adjustment. I'll bring this task back to dev to fix it.
Tabs in narrow screens
This was already documented in
T268428: Unwanted line break in content header of "Compare contents" step
so I'm inclined to exclude it from here.
Styling flickering
Yeah, it does flicker when we toggle between the two in this context but it looks like we showing them as they are. A en -> ko translator would probably be familiar with how those sites render and may find the current experience more familiar than surprising.
SBisson
moved this task from
Design Signoff
to
In-progress
on the
LPL Hypothesis
board.
May 29 2025, 12:57 PM
2025-05-29 12:57:00 (UTC+0)
Comment Actions
Bringing back to dev to handle the page title / section title overflow.
gerritbot
added a comment.
May 29 2025, 6:26 PM
2025-05-29 18:26:41 (UTC+0)
Comment Actions
Change #1152120 had a related patch set uploaded (by Sbisson; author: Sbisson):
[mediawiki/extensions/ContentTranslation@master] Compare content: handle overflowing article/section titles
gerritbot
added a project:
Patch-For-Review
May 29 2025, 6:26 PM
2025-05-29 18:26:42 (UTC+0)
SBisson
moved this task from
In-progress
to
Needs Code Review
on the
LPL Hypothesis
board.
May 29 2025, 6:26 PM
2025-05-29 18:26:58 (UTC+0)
ngkountas
added a comment.
Jun 2 2025, 9:55 AM
2025-06-02 09:55:44 (UTC+0)
Comment Actions
@SBisson
I believe that
@Pginer-WMF
in the last part about "Styling flickering" is referring to the changing font-weights of the
sx-content-comparator-header__article-title
and
sx-content-comparator-header__section-title
, which would be nice to get fixed.
gerritbot
added a comment.
Jun 2 2025, 10:35 AM
2025-06-02 10:35:14 (UTC+0)
Comment Actions
Change #1152120
merged
by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Compare content: handle overflowing article/section titles
ReleaseTaggerBot
added a project:
MW-1.45-notes (1.45.0-wmf.4; 2025-06-03)
Jun 2 2025, 11:00 AM
2025-06-02 11:00:18 (UTC+0)
Maintenance_bot
removed a project:
Patch-For-Review
Jun 2 2025, 11:31 AM
2025-06-02 11:31:22 (UTC+0)
SBisson
moved this task from
Needs Code Review
to
Pending deployment
on the
LPL Hypothesis
board.
Jun 2 2025, 1:10 PM
2025-06-02 13:10:58 (UTC+0)
SBisson
added a comment.
Jun 2 2025, 2:11 PM
2025-06-02 14:11:20 (UTC+0)
Comment Actions
In
T260115#10874680
@ngkountas
wrote:
@SBisson
I believe that
@Pginer-WMF
in the last part about "Styling flickering" is referring to the changing font-weights of the
sx-content-comparator-header__article-title
and
sx-content-comparator-header__section-title
, which would be nice to get fixed.
I thought this dynamic styling was on purpose, giving more prominence to the content in the selected tab. When the first tab is selected, the source section is shown and the section title is larger, but when the second tab is selected, the full article in target language is shown and the article title is bigger.
ngkountas
added a comment.
Jun 2 2025, 6:22 PM
2025-06-02 18:22:55 (UTC+0)
Comment Actions
Good observation! Leaving it to
@Pginer-WMF
to confirm, if we really have an issue here.
gerritbot
added a comment.
Jun 2 2025, 7:10 PM
2025-06-02 19:10:54 (UTC+0)
Comment Actions
Change #1152798 had a related patch set uploaded (by Sbisson; author: Sbisson):
[mediawiki/extensions/ContentTranslation@master] CX3 Build 1.0.0+20250602
gerritbot
added a project:
Patch-For-Review
Jun 2 2025, 7:10 PM
2025-06-02 19:10:55 (UTC+0)
gerritbot
added a comment.
Jun 3 2025, 12:14 AM
2025-06-03 00:14:33 (UTC+0)
Comment Actions
Change #1152798
merged
by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] CX3 Build 1.0.0+20250602
Maintenance_bot
removed a project:
Patch-For-Review
Jun 3 2025, 12:31 AM
2025-06-03 00:31:36 (UTC+0)
SBisson
moved this task from
Pending deployment
to
Needs QA
on the
LPL Hypothesis
board.
Jun 6 2025, 12:52 PM
2025-06-06 12:52:28 (UTC+0)
GMikesell-WMF
added a comment.
Edited
Jun 16 2025, 10:04 PM
2025-06-16 22:04:14 (UTC+0)
Comment Actions
@Pginer-WMF
@SBisson
Navigation control is fine as seen in the gif from moving from wider to narrower. Long sections does wrap, but when it's under 380 pixels, the tab structure changes. Is that fine still? Also for AC3, is the style flickering is as designed, or should it be fixed?
Test Result - Test Wiki
Status:
❓Need More Info
Environment:
Test Wiki
OS:
macOS Sequoia 15.5
Browser:
Chrome 137
Device:
MBA
Emulated Device:
Test Artifact(s):
Test Steps
Test Case 1: Ensure Navigation Controls Are Visible with Long Section Titles
Open Special\:ContentTranslation in Minerva skin using a narrow viewport (e.g., iPhone SE).
Select a page with a long section title (e.g., "Gummy bear" > "Ingredients and production").
Observe the placement of section navigation controls ('<' and '>').
✅ *AC1:** Section navigation controls remain visible and accessible without overflowing the viewport.
gif
Test Case 2: Ensure Section Title Wrapping and tab grouping on Narrow Screens
Use the same setup as Test Case 1.
Observe how the long section title is rendered at the top of the translation view.
AC2:
Long section titles either wrap to the next line and tabs are visually grouped without affecting layout integrity.
Over 380 Pixel
❓Under 380 Pixel
Mobile
Test Case 3: Ensure Stable Styling When Switching Language Tabs
In ContentTranslation, toggle between English and the target language tabs for a given section.
Watch the article and section titles for any flickering or font weight changes.
AC3:
Font weight and styling of the article and section titles remain consistent when switching tabs.
gif
GMikesell-WMF
updated the task description.
(Show Details)
Jun 16 2025, 10:07 PM
2025-06-16 22:07:09 (UTC+0)
GMikesell-WMF
moved this task from
Needs QA
to
In-progress
on the
LPL Hypothesis
board.
SBisson
added a comment.
Jun 18 2025, 4:46 PM
2025-06-18 16:46:17 (UTC+0)
Comment Actions
AC2 is covered by
T268428: Unwanted line break in content header of "Compare contents" step
so it won't be fixed here
AC3 is waiting for
@Pginer-WMF
to respond to
T260115#10875612
Pginer-WMF
added a comment.
Jun 19 2025, 1:44 PM
2025-06-19 13:44:33 (UTC+0)
Comment Actions
In
T260115#10875612
@SBisson
wrote:
In
T260115#10874680
@ngkountas
wrote:
@SBisson
I believe that
@Pginer-WMF
in the last part about "Styling flickering" is referring to the changing font-weights of the
sx-content-comparator-header__article-title
and
sx-content-comparator-header__section-title
, which would be nice to get fixed.
I thought this dynamic styling was on purpose, giving more prominence to the content in the selected tab. When the first tab is selected, the source section is shown and the section title is larger, but when the second tab is selected, the full article in target language is shown and the article title is bigger.
That was not intentional. With tabs the expectation is for the changes to happen mostly in the contents below. The text weight changing seems more likely to be perceived as a UI glitch rather than help clarify what is displayed on each tab. So I think we may still want to fix it. Having said that, given the focus of the current ticket is on responsiveness, it seems totally fine to keep this minor glitch in a separate ticket not blocking the completion of the current task.
Nikerabbit
edited projects, added
ContentTranslation
; removed
SectionTranslation
Jun 23 2025, 12:28 PM
2025-06-23 12:28:21 (UTC+0)
Nikerabbit
moved this task from
Needs Triage
to
Dashboard
on the
ContentTranslation
board.
SBisson
moved this task from
In-progress
to
Design Signoff
on the
LPL Hypothesis
board.
Jun 27 2025, 12:48 PM
2025-06-27 12:48:21 (UTC+0)
Comment Actions
I have filed
T398040: Compare contents: article and section titles style flickering
so that this task can move along
SBisson
added a subscriber:
Nikerabbit
Jun 27 2025, 12:55 PM
2025-06-27 12:55:33 (UTC+0)
Comment Actions
@Nikerabbit
I'd be inclined to consider the Compare contents step as part of "Translation editors" more than "Dashboard". The line can be blurry, especially since it's the same app for SX, but I'd consider suggestions, drafts, and published to be dashboard features and anything that enters the translation workflow to be on the editors side.
Pginer-WMF
closed this task as
Resolved
Jun 27 2025, 2:12 PM
2025-06-27 14:12:01 (UTC+0)
Pginer-WMF
moved this task from
Design Signoff
to
Product Signoff
on the
LPL Hypothesis
board.
Nikerabbit
moved this task from
Dashboard
to
Translation editor
on the
ContentTranslation
board.
Jun 28 2025, 6:59 PM
2025-06-28 18:59:43 (UTC+0)
Log In to Comment
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
Code of Conduct
Disclaimer
CC-BY-SA
GPL
Credits