@Pginer-WMF the mockup in the task description seems a bit old. The style of the language selector gives it away. Do you want to update it before I get to far on this task?

Also, do you see this as 2 states: mobile (fullscreen) and tablet (has the regular page header, the missing and present section side by side) or should there be 3 states as illustrated in the screenshots below?

Mobile	Tablet	Desktop

Change #1136014 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/ContentTranslation@master] Responsive adaptation for section selection view

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

In T259470#10728378, @SBisson wrote:

@Pginer-WMF the mockup in the task description seems a bit old. The style of the language selector gives it away. Do you want to update it before I get to far on this task?

The compact version of the language selector has a different design, but that seems the only expected difference:

Also, do you see this as 2 states: mobile (fullscreen) and tablet (has the regular page header, the missing and present section side by side) or should there be 3 states as illustrated in the screenshots below?

Mobile	Tablet	Desktop

The three states illustrated makes sense. the way I think about this is the combination of two states for two different aspects:

• Fullscreen (mobile) vs. panel with margins (larger than mobile).
• Sections on the same column (smaller than desktop) or separate columns (desktop or larger)

@Pginer-WMF FYI

Confirmation step, notice that the language selector is full width

Select sentence step, with the language selector full width (work in progress patch)

In T259470#10738693, @SBisson wrote:

@Pginer-WMF FYI

Confirmation step, notice that the language selector is full width

Select sentence step, with the language selector full width (work in progress patch)

I think we can leave the language selector as you were showing.
With the new approach for margins on those steps, the panel where the info is shown is narrower than in the original designs. So it may not stretch too much.

If we find it stretches too much on wider screens, we can reconsider how to use the more compact version as a follow-up.

Change #1136014 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Responsive adaptation for section selection view

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

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

@SBisson Functionality all works as designed, but please review any of the spec issues below.

Test Result - Test Wiki

Status: ❌ FAIL
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=Ukulele&filter-type=seed&from=en&to=es&page=Fingerboard#/sx/section-selector
https://test.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&filter-id=Ukulele&filter-type=seed&from=en&to=es&page=autoharp#/sx/section-selector

Test Steps

Test Case 1: Verify #Pick a section layout adapts responsively to larger screens

1. Open the Section Translation workflow on a desktop browser window sized to 1440px or wider.
2. Navigate to the "Pick a section" step.
3. ❌ AC1: Confirm that the layout adjusts for wide screens (Desktop) as per the design specs (e.g., more horizontal spacing, centered or expanded layout, proper alignment of section cards).

Issue# 1

1. Starting from the top, both headers on either side are lined up even if you make the screen smaller
2. "Choose a section" has different texts
3. Language Selector is supposed to be in the top right
4. "Sections" is added in both sides
5. "Automatic section matching" and "Unsupported sections" are not bold

Issue# 2

1. Still has $1 placeholders

Issue# 3

1. Background Color doesn't match specs

Test Case 2: Verify fallback to mobile layout on smaller screen widths

1. Resize the browser window to simulate a mobile device width (e.g., 375px).
2. ❌ AC2: Confirm that the layout reverts to the original mobile design, with stacked content and mobile-friendly navigation.

Issue# 4

1. "Choose a section" has different texts
2. "Automatic section matching" and "Unsupported sections" are not bold

Issue# 5

1. Still has $1 placeholders

@GMikesell-WMF thanks for the detailed observations.

I'll defer to @Pginer-WMF for the visual differences. They may be deliberate or accidental.

We've agreed in T259470#10739097 that the language selector can stay in place.

The $1 placeholders are really surprising though. Do you have any more information about how to reproduce the issue?

The current status looks good to me. The inconsistencies with the original designs are due to multiple updated in other fronts (UX writing review, and layout adjustmetns discussed as part of conversations about the use of dialogs and the language selector).

Capturing below the current state:

Mobile	Tablet	Desktop