Page MenuHomePhabricator

New translation search results empty state padding is unbalanced
Closed, ResolvedPublic

Description

On the Unified Translation Dashboard users can start a new translation and they are provided the option to search for a new article. There, a message is shown on empty states: initially, and when searching for an article title that produces zero results.

Currently, the message is not vertically centered and gives the impression that the panel over which it is displayed is too short for no apparent reason. The screenshots below compare current and proposed states:

CurrentProposed
test.wikipedia.org_w_index.php_title=Special_ContentTranslation&filter-type=automatic&filter-id=previous-edits&active-list=suggestions&from=en&to=ca(Wiki Tablet).png (768×1 px, 48 KB)
test.wikipedia.org_w_index.php_title=Special_ContentTranslation&filter-type=automatic&filter-id=previous-edits&active-list=suggestions&from=en&to=ca(Wiki Tablet) (1).png (768×1 px, 48 KB)

Note how the "Think of any topic..." message is vertically centered with the same portion of panel showing above and below it.

For reference, in the Old desktop dashboard, the UI is different but the message appears vertically aligned:

es.wikipedia.org_w_index.php_title=Especial_Traducci%C3%B3n_de_contenidos&campaign=contributionsmenu&to=es(Wiki Tablet).png (768×1 px, 99 KB)

Derived Requirement

Ensure that in the Unified Translation Dashboard, the empty state message shown in the “New translation” search panel (when there are no results or before any search is performed) is vertically centered within the panel. The vertical padding above and below the message should be equal, providing a balanced and visually consistent layout.

Test Steps

Test Case 1: Ensure vertical centering for initial empty state message

  1. Navigate to Special:ContentTranslation on the Unified Translation Dashboard.
  2. Do not enter a search query.
  3. ✅❓❌⬜ AC1: Confirm that the empty state message (“Think of any topic...”) is vertically centered in the panel.
  4. ✅❓❌⬜ AC2: Confirm that the “no results” message is vertically centered in the panel.

QA Results - Test Wiki Beta

ACStatusDetails
1T388011#10865812
2T388011#10865812

Event Timeline

PWaigi-WMF moved this task from Backlog to Prioritized on the LPL Hypothesis board.

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

[mediawiki/extensions/ContentTranslation@master] Search for an article: Fix empty state paddings

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

Change #1125382 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Search for an article: Fix empty state paddings

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

Nikerabbit renamed this task from New translation search empty state padding is unbalance to New translation search results empty state padding is unbalanced.Mar 12 2025, 8:08 AM

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

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

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

Change #1128494 merged by jenkins-bot:

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

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

Test status: QA FAIL.

Reasons: When the Page size is adjusted ( When in a mobile screen mode) the centering seems to be off. Uncertain if it was meant to work this way. Hence, I am moving this back to in progress.

This also occurs when an article with zero results is searched

See attached video

The empty state is now balanced in its initial state. However, the spacing seems inconsistent with the "no results found" empty state and the intermediate searching state.

Artboard.png (455×1 px, 36 KB)

This results in the panel growing and shrinking as the user types. @ngkountas I'm not sure if these empty and waiting states share enough aspects to be a quick fix or a separate task is preferred.

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

[mediawiki/extensions/ContentTranslation@master] CX search step: Fix empty state paddings

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

Change #1136809 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX search step: Fix empty state height

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

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

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

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

Change #1141940 merged by jenkins-bot:

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

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

@ngkountas Confirmed that the empty state message (“Think of any topic...”) and "No results" is vertically centered in the panel as seen in the gif and screenshots. I will move this to Sign-off. Thanks for all your work!

Test Result - Test Wiki Beta

Status: ✅ PASS
Environment: Test Wiki Beta
OS: macOS Sequoia 15.5
Browser: Chrome 136
Device: MBA
Emulated Device: NA

Test Artifact(s):

https://test.m.wikipedia.beta.wmflabs.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&filter-id=previous-edits&filter-type=automatic&from=en&to=de#/

Test Steps

Test Case 1: Ensure vertical centering for initial empty state message

  1. Navigate to Special:ContentTranslation on the Unified Translation Dashboard.
  2. Do not enter a search query.
  3. AC1: Confirm that the empty state message (“Think of any topic...”) is vertically centered in the panel.

gif

2025-05-28_13-08-07.mp4.gif (648×824 px, 522 KB)

  1. AC2: Confirm that the “no results” message is vertically centered in the panel..
Think of any topic...LoadingNo Results
2025-05-28_13-18-49.png (401×832 px, 31 KB)
2025-05-28_13-17-43.png (403×813 px, 20 KB)
2025-05-28_13-17-26.png (406×821 px, 25 KB)
GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF moved this task from Needs QA to Design Signoff on the LPL Hypothesis board.