Page MenuHomePhabricator

At smaller window widths, MediaSearch dropdowns are obsucred and not usable
Open, Needs TriagePublic

Description

I usually edit in split-screen, with a window width of about 944px (after chrome, scrollbars, etc), though this happens with any width between about 702px and 987px. When I click on a dropdown in MediaSearch, the dropdown visually opens, but doesn't appear on top of the rest of the interface. Even the small part of the dropdown that is visible can't be clicked on.

image.png (437×778 px, 41 KB)

At larger sizes or smaller sizes, the dropdowns display normally.

image.png (464×985 px, 45 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

I did some additional testing (according to the https://vuetifyjs.com/en/components/grids/#usage)

It seems that the drop-down menu is partially displayed with between 720 - ( $(document).width(); 720 and 983).

Since the drop-down menu is not displayed even for some of medium-sized devices (the table below is from https://vuetifyjs.com/en/components/grids/#usage), the issue needs to be fixed.

SmallsmSmall to medium tablet600px > < 960px
MediummdLarge tablet to laptop960px > < 1264px*
SimoneThisDot added a subscriber: SimoneThisDot.

After further investigation I have noticed that the dropdown is changing to a full width block at 720px and the above visibility is applied at 1000px, leaving the dropdown HIDDEN from 720 to 1000px.

I have implemented the following fixes:

  • Reduce the minimum width to start and show the dropdown overflow at 720px

image.png (512×1 px, 415 KB)

image.png (513×853 px, 286 KB)

image.png (490×678 px, 26 KB)

Change 705626 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/extensions/MediaSearch@master] At smaller window widths, MediaSearch dropdowns are obsucred

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

Change 705626 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] At smaller window widths, MediaSearch dropdowns are obsucred

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

Checked on commons betalabs - all looks good. The last filter "Sort by" behaves a little bit off when the window width ~790px. the drop-down options will be present but the filter title - "Sort by" - won't be displayed. However, it seems like an edge case and out of the scope of this task.

Screen Shot 2021-07-21 at 4.25.17 PM.png (1×1 px, 1 MB)

Checked on commons wmf.16 - looks as in @SimoneThisDot' comment above

Looks like the fix for this issue created a new issue: T287258.

Specifically, changing the breakpoint that the overflow-x: visible rule kicks in to the smaller "tablet" size (used to be "desktop) seems to be what is causing that visual bug.

I imagine that the code which styles the filter bar of the search UI was written when we had less content to fit there (we've added a few new filters, a hits count, etc). We may need to go back and adjust how the various elements interact to accommodate the current content.