Example page:
https://en.wikipedia.org/w/index.php?title=User:PetraMagna/sandbox&oldid=1306107331
As can be seen in the screenshot, narrow tables are stretched, creating visual anomalies.
The culprit is
@media all and (max-width: calc(640px - 1px)) {
.mw-parser-output table {
display: block;
overflow: auto;
max-width: 100%
}
}Adding width: fit-content fixes it and preserves the scrolling behavior.
I don't know where this stylesheet lives and cannot submit a patch. I felt that someone may have already complained about this but only found passing mentions of it on T361838.
QA steps
Test on both mobile and desktop
- Visit https://en.wikipedia.beta.wmcloud.org/wiki/User:Jdlrobson/T402066?venotify=saved
- Shrink screen
Confirm the table doesn't have the colored area marked with a red cross:
Requirement
Scope: Desktop and mobile web. Narrow tables must not be forced to stretch full width when screen width ≤640px.
- Tables should render at their natural width (fit-content) while retaining horizontal scroll behavior when content exceeds viewport width.
- Verify behavior on both desktop (resized window) and mobile (Minerva).
BDD
Feature: Tables respect natural width and allow scroll without stretching
Scenario: Narrow table in small viewport
Given I open a page containing a narrow table
When I resize the viewport to ≤640px (desktop or mobile)
Then the table width is fit to content (not stretched full width)
And horizontal scrolling remains possible if neededTest Steps
Test Case 1: Desktop narrow viewport table rendering
- Open page similar to https://en.wikipedia.beta.wmcloud.org/wiki/User:Jdlrobson/T402066?venotify=saved in a desktop browser.
- Resize the window to ≤640px.
- AC1: The table’s rendered width matches its content width (not stretched full width).
- AC2: Horizontal scroll is available when content exceeds viewport width.
- AC3: No extra colored background area appears beyond the table boundary.
Test Case 2: Mobile (Minerva) table rendering
- Open the same page on mobile (Minerva skin).
- Observe the table display in the default viewport.
- AC4: The table’s rendered width matches its content width (not stretched full width).
- AC5: Horizontal scroll is available when content exceeds viewport width.
- AC6: No extra colored background area appears beyond the table boundary.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T402066#11150661 |
| 2 | ✅ | T402066#11150661 |
| 3 | ✅ | T402066#11150661 |
| 4 | ✅ | T402066#11150661 |
| 5 | ✅ | T402066#11150661 |
| 6 | ✅ | T402066#11150661 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T402066#11150668 |
| 2 | ✅ | T402066#11150668 |
| 3 | ✅ | T402066#11150668 |
| 4 | ✅ | T402066#11150668 |
| 5 | ✅ | T402066#11150668 |
| 6 | ✅ | T402066#11150668 |
