Page MenuHomePhabricator

Compare contents: New section placeholder spacing doesn't match specification for present sections
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
ngkountas
Apr 14 2025, 6:14 PM
Referenced Files
F60726431: 2025-05-27_16-18-51.png
May 27 2025, 11:23 PM
F60725991: 2025-05-27_16-10-09.png
May 27 2025, 11:23 PM
F59786057: 2025-05-08_11-54-08.png
May 8 2025, 6:59 PM
F59786017: 2025-05-08_11-50-47.png
May 8 2025, 6:59 PM
F59785620: 2025-05-08_11-27-46.png
May 8 2025, 6:59 PM
F59785669: 2025-05-08_10-58-24.png
May 8 2025, 6:59 PM
F59785667: 2025-05-08_10-58-55.png
May 8 2025, 6:59 PM
F59785646: 2025-05-08_10-48-29.png
May 8 2025, 6:59 PM

Description

Steps to replicate the issue:

  1. Visit the CX unified dashboard.
  2. Select an existing article to expand
  3. Pick a present section to translate and navigate to the "Compare contents" step.
  4. From the content selector bar select the second option "Section in {target_language}"
  5. Scroll down until you find the light blue new section placeholder.

What happens?:
The inline spacing of the placeholder doesn't match the design specifications as defined in T241589.

Design specifications

Compare contents - Present section discard.png (768×1 px, 79 KB)
Compare contents - Contents Dimensions.png (768×1 px, 162 KB)

Current layout

Compare contents new section placeholder for present sections: Before fix 1 (857×402 px, 259 KB)
Compare contents new section placeholder for present sections: Before fix 2 (857×402 px, 257 KB)

What should have happened instead?:
The spacing should match the specifications.


Derived Requirement

Ensure that the #new section placeholder for present sections in the "Compare contents" step of Content Translation matches the inline spacing specifications defined in task T241589.

Test Steps

Test Case 1: Verify #new section placeholder spacing for present sections

  1. Visit the CX unified dashboard.
  2. Select an existing article to expand for translation.
  3. In the article view, select a present section to translate and proceed to the "Compare contents" step.
  4. In the content selector bar, choose the second option labeled "Section in {target\_language}".
  5. Scroll until you locate the light blue placeholder indicating a new section.
  6. ✅❓❌⬜ AC1: Confirm that the inline spacing around the new section placeholder matches the spacing specifications from T241589.

QA Results - Test Wiki

ACStatusDetails
1T391884#10805694

Event Timeline

ngkountas triaged this task as Low priority.
ngkountas moved this task from Prioritized to In-progress on the LPL Hypothesis board.

Change #1136429 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] Compare Contents: Fix styles for new section placeholder when present

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

Change #1136429 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Compare Contents: Fix styles for new section placeholder when present

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

Change #1139523 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 1.0.0+20250428

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

Change #1139523 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 1.0.0+20250428

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

@ngkountas It doesn't resemble the picture of lining up in the task description with mobile or Desktop, as seen in the screenshots below.

Test Result - Test Wiki

Status: ✅ PASS
Environment: Test Wiki
OS: macOS Sequoia 15.4.1
Browser: Chrome 135
Device: MBA
Emulated Device: NA

Test Artifact(s):

https://test.wikipedia.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&filter-id=Technology%20Essential%20Articles&filter-type=collections&from=en&to=es&page=Paper&section=History#/sx/content-comparator

Test Steps

Test Case 1: Verify #new section placeholder spacing for present sections

  1. Visit the CX unified dashboard.
  2. Select an existing article to expand for translation.
  3. In the article view, select a present section to translate and proceed to the "Compare contents" step.
  4. In the content selector bar, choose the second option labeled "Section in {target\_language}".
  5. Scroll until you locate the light blue placeholder indicating a new section.
  6. ✅❌ AC1: Confirm that the inline spacing around the new section placeholder matches the spacing specifications from T241589.
✅Mapped Section✅Mapped Discarded✅ New Section✅ Loading
2025-05-08_10-48-16.png (1×769 px, 148 KB)
2025-05-08_10-48-29.png (1×827 px, 148 KB)
2025-05-08_10-58-55.png (1×755 px, 203 KB)
2025-05-08_10-58-24.png (690×995 px, 63 KB)

✅ It doesn't resemble the picture of lining up in the task description with mobile or Desktop, as seen in the screenshots below.
UPDATE: See comments below

Task Description AlignmentCurrent Mobile AlignmentCurrent Desktop Alignment
2025-05-08_11-27-46.png (927×935 px, 295 KB)
2025-05-08_11-50-47.png (969×700 px, 164 KB)
2025-05-08_11-54-08.png (1×1 px, 385 KB)

@GMikesell-WMF I think you got confused in the the last test. The screenshots you copied as "Task Description Alignment" are screenshots of the problematic alignment, before the fix. Looking at the screenshots after the fix that you provided, I believe that the alignment is fixed and the task can be closed as Done. Moving this back to "Needs QA", for you to recheck if needed.

@ngkountas Oh I thought when you had current layout of the "Task Description Alignment" screenshots, they were the before and after. I will move this to Done as seen from the screenshots below. Thanks for all your work!

https://test.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&filter-id=popular&filter-type=automatic&from=en&to=es&page=Until%20Dawn&section=Gameplay#/sx/content-comparator

MobileDesktop
2025-05-27_16-10-09.png (1×1 px, 429 KB)
2025-05-27_16-18-51.png (1×1 px, 441 KB)
GMikesell-WMF updated Other Assignee, removed: GMikesell-WMF.
GMikesell-WMF moved this task from Needs QA to Design Signoff on the LPL Hypothesis board.