Page MenuHomePhabricator

Visual Bugs in Search Filter bar
Closed, ResolvedPublicBUG REPORT

Description

There are a couple of visual issues with the MediaSearch search filters bar that seem to be related (fixing one thing breaks another). The tricky part is that different issues surface with different combinations of skins and breakpoints (viewport widths).

Here's an attempt to catalogue everything so that we can come up with a comprehensive solution.


On master branch as of 9ca4b54cc4776ac3977e4678cc75ee914b8cd502:

IssueAffected skinsAffected breakpoints
Right-hand gradient does not disappear despite scrolling all the way to the right, partially obscuring the results countVector onlyMobile only
Total hits count extends beyond right edge & gradient, breaks layout (T287258)Vector onlyTablet only

With 9100b5b2 reverted:

IssueAffected skinsAffected breakpoints
Right-hand gradient does not disappear despite scrolling all the way to the right, partially obscuring the results countVector onlyMobile only
Filter drop-down menus are hidden behind search results and are not usable (T286751)Vector & MinervaTablet only

Tablet breakpoint seems to be where most of the issues come up, so we may need to re-think how we handle things here. Any patches that attempt to address these problems need to be QA-ed at the three most critical breakpoints (sub-720px width, 720-1000px width, and 1000+ px width) and on both Minverva and Vector skin (ideally also in new vs "classic" vector modes).

Event Timeline

Change 714615 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/MediaSearch@master] Fix search filters visual bugs

https://gerrit.wikimedia.org/r/714615

As far as I can tell, it's impossible to do the following things at the same time:

  1. Show a narrow (not full-width) dropdown from a filter without getting hidden behind the search results
  2. Ensure that horizontal overflow doesn't break out from behind the gradient on the right-hand edge, breaking the layout

The problem comes from some weird interactions between flexbox and how CSS overflow properties get interpreted. Full-width dropdown menus (which we use on smaller screen sizes) work fine because they are positioned differently from the narrow dropdowns we use at larger sizes.

I tried to change the behavior over at the tablet breakpoint (720px wide) instead of the desktop breakpoint (1000px), but there are too many unknowns that might cause horizontal overflow at smaller sizes: the number of filters in a given tab, whether or not the user is on Vector and has the page sidebar visible, the exact length of the filter menu labels in the user's language, etc. So we are going to be stuck with full-width dropdowns until the user is for sure on a wide enough screen to accommodate all the horizontal content we need to fit in this region. I think that's a small price to pay to fix the other issues.

To be on the safe side, this patch should be extensively QA-ed on multiple browsers in all the skin / breakpoint combinations listed above. Also in "new" Vector with sidebar expanded & collapsed, etc, in UI languages that are especially character-heavy, etc.

Change 714615 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] Fix search filters visual bugs

https://gerrit.wikimedia.org/r/714615

[WIP] Testing notes for checking in production.
For betalabs and commonswmf.23 should be checked

  • Vector (default) and Legacy vector
  • three breakpoints: <720px, 720-100px, >1000
  • mobile devices: Android (Samsung Galaxy S8), iOS (6s and iPad 8th generation)

Note: : if the screenshots in the table below do not specify whether it's Android or iOS device or Vector (default) or Vector Legacy, that means that the UI is the same across devices/skins

  • Mobile
Issuebetalabscommons wmf.23commons wmf.21
Right-hand gradient does not disappear despite scrolling all the way to the right, partially obscuring the results count Testing comment: it might be not obvious for a user to vertically scroll to see the number of results and other menu options.
Screenshot_20210909-141211_Chrome.jpg (2×1 px, 304 KB)
IMG_0331.PNG (640×360 px, 200 KB)
Screenshot_20210909-140824_Chrome.jpg (2×1 px, 604 KB)
Total hits count extends beyond right edge & gradient, breaks layout
Screen Shot 2021-09-10 at 10.39.21 AM.png (1×1 px, 1 MB)
Screen Shot 2021-09-21 at 4.56.07 PM.png (1×1 px, 3 MB)
IMG_0012.PNG (2×1 px, 3 MB)
Filter drop-down menus are hidden behind search results and are not usable Testing comment: the issue is not present neither on betalabs or in production. iPad only:The drop-down menu is larger in betalabs (for Vector and Minerva skins portrait orientaion
Screen Shot 2021-09-10 at 10.59.36 AM.png (1×1 px, 1 MB)
Screen Shot 2021-09-21 at 4.58.38 PM.png (1×2 px, 3 MB)
Screen Shot 2021-09-10 at 10.56.13 AM.png (843×1 px, 1 MB)

  • small screens
Issuebetalabscommons wmf.23commons wmf.21
Right-hand gradient does not disappear despite scrolling all the way to the right, partially obscuring the results count
Screen Shot 2021-09-09 at 2.32.28 PM.png (1×1 px, 213 KB)
Screen Shot 2021-09-09 at 2.32.09 PM.png (1×1 px, 248 KB)
Screen Shot 2021-09-09 at 2.32.44 PM.png (1×1 px, 200 KB)
Screen Shot 2021-09-21 at 3.59.58 PM.png (1×1 px, 1 MB)
Screen Shot 2021-09-21 at 4.02.47 PM.png (1×1 px, 700 KB)
Screen Shot 2021-09-21 at 4.03.11 PM.png (1×1 px, 273 KB)
Screen Shot 2021-09-10 at 4.34.38 PM.png (1×1 px, 666 KB)
Screen Shot 2021-09-10 at 4.35.42 PM.png (1×1 px, 2 MB)
Screen Shot 2021-09-10 at 4.35.28 PM.png (1×1 px, 2 MB)
Total hits count extends beyond right edge & gradient, breaks layout(see the above screenshots
Screen Shot 2021-09-21 at 5.08.03 PM.png (1×1 px, 886 KB)
Screen Shot 2021-09-10 at 4.35.28 PM.png (1×1 px, 2 MB)
Filter drop-down menus are hidden behind search results and are not usable Testing note: the issue is not present neither in betalabs nor on productionnot presentnot presentnot present