Page MenuHomePhabricator

Vector 2022: about File History table and scrollbar on Wikimedia Commons
Open, LowPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • log in and apply Vector 2022 skin
  • go to Wikimedia Commons and open a file, e.g. this one
  • go to the bottom of the page
  • narrowing the window, watch the bottom of the page and the table in the "History File" section

What happens?:

  • narrowing the window, an horizontal scrollbar appears because the History File table is not responsive
  • this scrollbar is out of the "File History" section, far away, after "File usage on Commons" and "Metadata"
  • continuing narrowing the window 1. the scrollbar appears, then 2. the Tools menu closes, the content becames larger and the scrollbar disappears, 3. then it appears again.

What should have happened instead?:

  • the horizontal scrollbar should be within the "History File" section" just under the "History File" table, to make clear that his goal is to allow scrolling the table
  • a smooth change narrowing the screen is expected

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Not responsive tables are a known issue, but the table in the "History File" section has not been investigated yet. Perhaps the history of the file should be styled differently.
The table is not responsive also in other skins, but in Vector 2022 Page Tools menu puts in evidence some issues and create new ones.

Event Timeline

Patafisik renamed this task from Vector 2022: about File History table and scrollbar to Vector 2022: about File History table and scrollbar on Wikimedia Commons.Feb 27 2023, 7:26 AM
Jdlrobson subscribed.

This is a problem with all skins, just more obvious in responsive skins. I think in this case the correct solution is to add some responsive styles to convert this from a table to div's using display flex.
It should look like this on lower resolutions:

Screenshot 2023-06-08 at 5.06.16 PM.png (238×354 px, 45 KB)

Patch welcome.

This is a problem with all skins, just more obvious in responsive skins. I think in this case the correct solution is to add some responsive styles to convert this from a table to div's using display flex.
It should look like this on lower resolutions:

Screenshot 2023-06-08 at 5.06.16 PM.png (238×354 px, 45 KB)

Patch welcome.

Actually, that is the easy part (of course I've thought about this at some time). The harder part is making this look good with multiple entries in the history. That makes the table a lot harder to style nicely.

@TheDJ I was thinking the above style would repeat (e.g. each row would look like this).

This would require adding multiple th elements equivalents e.g. https://jsfiddle.net/jg27xuzq/ (which hasn't got the flex part)
Do you see issues with that kind of approach?