User talk:Jdlrobson/responsiveVector2022.js

Paper cuts so far....

1. At narrow width, the page header is squished. There are three items, the TOC button, the title, and the language bar. It doesn't look pretty even for a pretty short title, and when you browse to something like WP:ANI you are very sad about the line breaks. At this width, these should either be flex-wrapped or the flex should be removed or both. I don't know the best way to deal with the TOC button in that event.
2. The TOC button (input element) goes transparent in both :hover and :active, which on my mobile device means that when the menu is selected it is transparent. It doesn't look very aesthetic when that button is active and anywhere other than its starting position at the top of the page.
3. On my device, clicking into the search bar at the top of every page causes the left side of the input to overflow the container (i.e. the whole page), without the nice version you'd find with most tables in mobile browsers that allows you to scroll to the right (which while ugly is still visible). Needs some sort of max-width or potentially not be on the same line as the other stuff in the header or probably both.
4. Speaking of which, if you move the search bar out of that line you can probably move the user portal icons back into the line with the Wikipedia wordmark.
5. General font-size of the reading material could use a boost (headers are fine, as a particular point). I know that's going to be looked at for the whole skin, but I'd welcome it at small resolution also.
6. While on my device (which apparently has a width around 500px if I fiddle with the console mobile simulator on an account without this script), Special:Search looks ok with images. I don't think it would look that great if things got much smaller or the font size got bigger. phab:T320295 and phab:T320828 could give some more flexibility here (these were filed when thumbnails were added to Special:Search for context). There is some related chatter in one of my talk page archives.
7. Infoboxes aren't filling the whole space, but that's an onwiki thing to resolve, at this rate maybe somewhere near the heat death of the universe. (At which point Minerva and Timeless won't need their 'hacks' for it -- and Vector 22 shouldn't add hacks for this here.) Maybe fixing it for most pages is good enough.

Just for interest's sake, I'm using Firefox on Android. Izno (talk) 07:23, 22 July 2023 (UTC)

Oh, and advanced watchlist needs a review for usability. Its use of tables makes it unfriendly for mobile resolutions. Minerva has their own fancy watchlist and Timeless deals with it because of the general wide table-supporting Javascript. display: grid might be feasible here in general, at both smaller and larger resolutions (which would also help Minerva move off its customized form). I don't use the other forms of watchlist but those should probably be reviewed too. Izno (talk) 21:30, 23 July 2023 (UTC)