Page MenuHomePhabricator

[XS] Media Search: Decrease padding below filters
Open, Needs TriagePublic


When we removed the gray bar behind the filters it made the padding between the filters and the results too large. It appears to be around 30px right now via a few different elements above and below, I think halving that to about 16px would resolve this while still giving it enough room.

Event Timeline

mwilliams created this task.Jan 7 2021, 5:10 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 7 2021, 5:10 PM
CBogen renamed this task from Media Search: Decrease padding below filters to [XS] Media Search: Decrease padding below filters.Jan 13 2021, 5:57 PM


  1. @media screen and (min-width: 720px) .wbmi-select__content:
    1. padding: 6px 36px 6px 12px;
  2. .wbmi-select__content:
    1. padding: 11px 36px 11px 12px;
  3. .wbmi-media-search-filters
    1. min-height: 2.5em
    2. padding: 6px 0px
  4. .wbmi-media-search-results
    1. margin: 16px 0

@mwilliams Just taken a gander at this. At the moment there is 12-17 px of white space with padding associated with the filters and 16 px of whitespace associated with the search results from a margin.

Do you want to just drop the margin on the search results to 0px to keep the space above above and below the filters symmetric or do you want a degree of asymmetry?

In which case we could keep 4 or 5px on the margin on the search results.

@Jseddon Tested out removing the 16px from the search results and that seems like it does the job nicely!

Change 666385 had a related patch set uploaded (by Seddon; owner: Seddon):
[mediawiki/extensions/WikibaseMediaInfo@master] Media Search: Decrease padding below filters

AnneT added a subscriber: AnneT.Tue, Feb 23, 4:59 PM

@Jseddon your solution looks great! One question for @mwilliams: do you think the new decreased padding works on the Other Media tab, or do we need a little more space here?

Yeah, I wondered that when I took a look at this @AnneT, thanks for bringing that up.

After spending some more time with it, I think we could offer a bit more space, let's switch that 16px to 6px instead of 0px. Does that sound reasonable?

AnneT added a comment.Tue, Feb 23, 6:03 PM

@mwilliams Sounds good! Just to be clear, do you want that 6px just on the Other Media tab only, or on all tabs?

I think its fine to have it on all the tabs to make this consistent