Background
In T113101 we enabled responsive image behaviour in Vector 2022. This also enabled styling rules for infoboxes and hatnotes that was intended to improve responsive behaviour of the Vector 2022 skin with new font sizes and smaller breakpoints by applying existing styles on Minerva that we later reverted in T367462. These styles mix visual changes and behavioural changes, so we'll want to more carefully through the lens of the feedback provided by the community and the goals we need to meet.
User story
As a reader using larger font sizes and/or lower screen resolutions, I want infoboxes and hatnotes to adapt to my browser.
Requirements (TODO)
TODO
BDD
- For QA engineer to fill out
Test Steps
- For QA engineer to fill out
Design
Infobox
- Apply a max width of 320px to infoboxes
- At lower resolutions the infobox should take up the full width of the page and have no margins by switching the table to use flex box. Note: We discovered this causes some issues with infoboxes that have class infobox-table
- Changes font size from 88% to 90%
- Adjusts border color and background color (that can be overriden on wiki)
- Adjusts padding of captions
- table column and heading columns get increased padding and bottom border to separate lines
- text is aligned to the left (right in RTL)
- disables floating at lower resolutions
| Before | After |
 |  |
 |  |
Related and relevant feedback
- "What just happened? Infoboxes and Hatnotes on Vector 2022 looks similar to that on Minerva"
- Just my 2¢ I'm working on Præsidenten fra Nordvest and the infobox looks so strange with the width being the size of the image. It looks inconsistent with other films like Batman (1989 film) (which I presume the width maxes out when there's a line break in one of the cells
- "Perhaps, although the infoboxes seem thinner altogether, like there is simply less room for text overall."
- "Are the borders suppose to be missing? When I first saw it, I thought the change was to improve ascetics"
- "dividers can be either gaps or lines – there is absolutely no need to use both approaches together, as this consumes valuable space and adds visual noise at the same time without producing any benefits."
Some problems to consider as exposed by roll out
- Certain infoboxes are themselves tables with columns e.g. https://en.m.wikipedia.org/wiki/2024_European_Parliament_election_in_Ireland and https://en.m.wikipedia.org/wiki/Theo_Walcott - these were adapted to enforce table layouts, but do not go full screen on mobile as a result.
Hatnote
- Takes up full screen
- Has a background to distinguish it from other elements in the page.
- Sets font size in rems so it doesn't scale with font size
- Makes all links inside hatnotes blue
| Before | After |
 |  |
 |  |
Examples: https://en.wikipedia.org/wiki/Special:WhatLinksHere/Template:Hatnote
Related and relevant feedback
- "The text size does not increase with selecting larger text from the appearance menu. "
- "Combination of tiny font and pale blue background is making section hatlinks almost illegible and major eyestrain on my laptop."
- "Not keen on the new look at all, this is something that should have been agreed."
Acceptance criteria
- Any styles restricted to skin-minerva should be moved to skinStyles e.g. we should add support for skin styles in WikimediaMessages.
Communication criteria - does this need an announcement or discussion?
This will need to be communicated to editors to avoid a repeat of T367462.
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
Note about container queries
Something like this is likely needed for making our content responsive:
.mw-body-content {
container-name: article-content;
container-type: inline-size;
}
@container article-content (inline-size < 700px) {
.infobox {
float: none !important;
margin: auto;
}
}