Page MenuHomePhabricator

Query Service horizontal scroll
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT

Description

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

  • Open Query Service
  • Run this query
  • Reduce the width of your browser window so that at least one of the columns is hidden

What happens?:
No horizontal scroll is available to allow users to view all the columns in the query results.

What should have happened instead?:
A horizontal scroll should be appear as required to view all the columns in the query results.

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

Other information (browser name/version, screenshots, etc.):

Event Timeline

Task Breakdown Notes:

  • There is a horizontal scrollbar, but all the way at the bottom of the table, i.e. you need to scroll vertically to the end in order to see / use the horizontal one
  • The goal is to have a sticky scrollbar at the bottom of the table containr, as the body scrollbar will lead to some visual bugs if restored. We might be able to enable this with bootstrap-table (the js library we use to render the result table)

Hmm, I think this issue can only be reproduced by making the browser window narrower? I tried to put together a query that’s wide enough to require scrolling even at a normal window width, but it just changed into a “linearized” table (T325075#8519658) right away. I didn’t realize that before.

When discussing with @Arian_Bozorg, we decided that the right overall approach was to prevent linearization above the current breakpoint (563px) and ensure that the table keeps its default display and can be scrolled horizontally. After performing some checks, it seemed that this was already the case, and that the original issue described by Nikki (T325075) was caused by a lack of wrapping that we're now trying to address (T327514 and T327511). If implementing /ensuring the described behavior (maintain a table display) requires a different type of effort (beyond this bug), though, then it sounds like we need a different ticket.

I think what happened here (because it also initially happened to me), is that the horizontal scrollbar is not expected to be at the very bottom of the entire page (meaning to reach it you need to scroll through the whole table).

There is no standards complaint way to "fix" this (make the horizontal scrollbar always appear on screen?). What I personally perceive as a more intuitive behavior was (I tinkered around with this for a bit), to restrict the height of the table so the table itself fits on one screen (and is scrollable, not just the via scrolling the entire page), so that the horizontal scrollbar is visible sooner (but that also has its caveats).

Alternatively we could also make our code use the more dense "mobile" view as soon as the table no longer fits horizontally.

But all of this aside, the specific thing that this task ask for is resolved (and probably never needed fixing).

Ok this seems to have become much bigger than anticipated.

If there is a horizontal scrollbar at the bottom let's leave it as is.

Thanks everyone for looking into this :)