Page MenuHomePhabricator

The filter panel for Recent changes does not adapt well to narrow windows
Open, Needs TriagePublic

Description

The panel does not seem to adapt well to browser windows smaller than the panel initial size. Some examples:

Screen Shot 2017-02-24 at 12.30.54.png (744×800 px, 126 KB)
Screen Shot 2017-02-24 at 12.31.51.png (745×547 px, 75 KB)

Currently:

  • The panel does not adjusts its width when there is less room. The panel seems unable to reduce its width when needed (at least to the point where the "Filters" heading becomes closer to the "Highlight" button)
  • When the panel does not fit, the left part (where the checkboxes are) is the one going out of the viewport.

I think it is much better to reduce the panel as the viewport gets narrow, and when we reach the point that it cannot be reduced further, keeping it left aligned for the user to scroll the whole window. You can check the prototype to see what I mean.

The above issues affect users with browser windows smaller than 850px. A related issue happens with the dynamic adjustment when resizing the window across that range (view example).

Event Timeline

@Pginer-WMF, what is your purpose here? How narrow are you wanting to go? I ask because just yesterday we decided that our mobile "strategy" for RC FIlters will be:
Block RC Filters beta from displaying on mobile (including the desktop version of mobile)

@Pginer-WMF, what is your purpose here? How narrow are you wanting to go? I ask because just yesterday we decided that our mobile "strategy" for RC FIlters will be:
Block RC Filters beta from displaying on mobile (including the desktop version of mobile)

The request is independent from the mobile case. In desktop there are several cases where the users may have a browser window of a size where the tool breaks. My purpose is for the tool to be usable in such cases.

When making the window small it is ok for content areas to either (a) reduce accordingly (as the "active filters currently do), or (b) remain static requiring to scroll. What I propose is for the panel to reduce until it reaches a minimum width (558px in the prototype) and then remain fixed but reachable through the regular scroll of the page.

The current situation is that it looks either (c) misplaced and/or (d) unreachable, which is not ok in my opinion.

This is related to T158923: Block RC Filters beta interface from displaying on mobile, but make sure that URL query parameters work, which is about turning off RC Filters for mobile, including the desktop version when on mobile (which will likely be achieved through width detection).

@Mooeypoo We might be able to address this quickly with something like max-width: 70vw?