Background

Right now, the width control disappears from appearance settings on viewports below ~1400px

Width control present

disappears 10 pixels narrower

User story

As a Wikipedia desktop reader, I want appearance settings to remain consistent regardless of my viewport size, and for settings to have appropriate system feedback when they don't apply.

Requirements

• Width appearance setting remains persistent, regardless of viewport width
• At viewport widths below ~1400px (need to find the exact value), width settings should remain visible and clickable
• If a reader at the "standard" width setting clicks the "wide" option at a viewport width where that action would have no effect, show an exclusion notice that reads: "The content is as wide as possible for your browser window."
• The notice should persist until the reader navigates to another page, clicks "Standard" again, or the session ends.

Requirement

Ensure that the width controls in the appearance settings of the Vector 2022 skin remain visible and usable regardless of viewport width. When the "wide" option is clicked and the viewport width is too narrow for it to have an effect, an exclusion notice should be displayed and persist until the reader navigates away, clicks "Standard" again, or the session ends. The specific text of the exclusion notice should be: "The content is as wide as possible for your browser window."

BDD

gherkin
Feature: Persistent Width Appearance Setting in Vector 2022

  Scenario: Ensure width appearance setting remains visible and clickable
    Given the user is viewing the appearance settings in Vector 2022
    When the viewport width is below 1400px
    Then the width appearance setting should remain visible and clickable

  Scenario: Show exclusion notice for non-functional "wide" setting
    Given the user is viewing the appearance settings in Vector 2022
    And the viewport width is below 1400px
    When the user clicks the "wide" option
    Then an exclusion notice should appear
    And the notice should read: "The content is as wide as possible for your browser window."
    And the notice should persist until the reader navigates to another page, clicks "Standard" again, or the session ends

Test Steps

Test Case 1: Ensure Width Appearance Setting Remains Visible and Clickable

1. Set the viewport width to below 1400px.
2. Open the appearance settings in Vector 2022.
3. AC1: Confirm that the width appearance setting remains visible and clickable.

Test Case 2: Show Exclusion Notice for Non-functional "Wide" Setting

1. Set the viewport width to below 1400px.
2. Open the appearance settings in Vector 2022.
3. Click the "wide" option.
4. AC2: Confirm that an exclusion notice appears, reading: "The content is as wide as possible for your browser window."
5. AC3: Confirm that the notice persists until the reader navigates to another page, clicks "Standard" again, or the session ends.

Design

• Design requirements listed above. We need to wordsmith the exclusion notice text before this goes live.

Technical notes

The requirement of only showing the notice when the user clicks a setting can be achieved with CSS. During estimation the team estimated the following implementation approach:

• Always render the exception message in the template, but make it hidden by default
• If the browser is at a certain resolution AND the the "wide" option is selected
• Use an input:checked and sibling selector ~ to target the exception notice and make it visible.

note: This approach is dependent on DOM order, so for it to work, the exception notice must be a sibling of the radio input.

Acceptance criteria

• Add acceptance criteria

Communication criteria - does this need an announcement or discussion?

• Add communication criteria

Rollback plan

• What is the rollback plan in production for this task if something goes wrong?

This task was created by Version 1.0.0 of the Web team task template using phabulous

QA Results - PROD