| SerDIDG | |
| Wed, Aug 12, 5:14 PM |
| F99254788: firefox_PGt1vAUM2a.mp4 | |
| Fri, Aug 21, 8:16 AM |
| F98230379: image.png | |
| Wed, Aug 12, 5:21 PM |
| F98230489: image.png | |
| Wed, Aug 12, 5:21 PM |
| F98229444: firefox_IBRUwerZ37.png | |
| Wed, Aug 12, 5:14 PM |
The select element overflows because of the long inner content (long tag names) on Special:PendingChanges, which causes the whole layout to overflow with a horizontal scroll bar on small screen sizes and mobile. I have attached a patch that adds max-width: 100%; to the particular select, which for some reason is lacking in Codex, and enabling fields to shrink smaller than the size of their internal content by adding min-width: 0;.
Before patch:
 |  |
After patch:
Change #1324585 had a related patch set uploaded (by Serhio Magpie; author: Serhio Magpie):
[mediawiki/extensions/FlaggedRevs@master] FlaggedRevs: Fix overflow issue on the Special:PendingChanges
I could reproduce it upstream by tweaking the HTML of the the CSS-only demo, but not with the Vue version. Can this be fixed in Codex rather than downstream?
Claimed for Codex!
@Tacsipacsi Thanks for reproducing! Can you help me test for other form controls?
@Les4353 Thanks for claiming it! Please note that the issue has already been solved in FlaggedRevs, so the task is basically porting the fix to Codex.
What other form controls? I don’t think there are any other Codex form controls that
Sure! Also, after upstream fixed, the downstream patch should be reverted.
What other form controls? I don’t think there are any other Codex form controls that
- have a CSS-only version,
- and could possibly overflow (controls that accept arbitrary user input, like <input type="text">, usually cut off the end of the too long input, making it scrollable; while labels naturally break into multiple lines).
OK, thanks deeply about that!
I was a bit imprecise. The fix is ready (see the Related Changes in Gerrit above) but not merged yet. So the simplest solution is just not merging (that part of) the fix.
Oh, you're right! @SerDIDG please abandon that!
I removed the part that fixes the select from the patch, which will be moved to upstream. The part that is left is crucial to properly fix this issue.
Change #1327443 had a related patch set uploaded (by Les4353; author: Les4353):
[design/codex@main] select: Ensure select will not overflow in short containers
Attached a file to demonstrate overflow behavior in Codex for the patchreview comment.