Originally this story was to ensure the search results layout is organized as per the grid structures proposed by design system team and that it was responsive at various breakpoints.
It was clarified in our our “SDAW Search Experimentation Design weekly” meeting that we are not fundamentally changing the structure of the special:search page or building for vector 2022 as part of this phase of the search improvement project. The scope does not include fully fitting the page into the new system. Going halfway might be following the spirit of where we may go with this page structure in the future but fully changing the structure is out of scope.
The scope of this story is now updated to:
- Ensuring the layout and spacing is responsive to different screen size at various breakpoints.
After a discussion related to possible breakpoints and layouts for various screens, here's the current thinking (across all skins):
- don't show interwiki results on the side on screens smaller than desktop breakpoint (1000px); interwiki results will be displayed full width at the bottom
- on screens wider than 1000px, we'll have 8/12 search results, 1/12 white space, 3/12 interwiki widget
- note: at the very minimum (1000px), the search results will be smaller than 50em (more like ~45em)
- note: if no interwiki widget, search results still won't grow wider than 8/12
- on screens wider than 1440px, we'll have 7/12 search results, 1/12 white space, 3/12 interwiki widget, 1/12 whitespace
Here's what that looks like in common screen resolutions:
| 800px wide | 1024px wide | 1280px wide | 1440px wide | 2048 wide | |
| old vector | |||||
| new vector | |||||
AC:
- On screens smaller than 1000px, search results occupy the full width; interwiki results are displayed below search results
- On screens wider than 1000px & smaller than 1440px, search results occupy 8/12 of available space, then 1/12 whitespace, then 3/12 interwiki widget
- On screens wider than 1440px, search results occupy 7/12 of available space, then 1/12 whitespace, then 3/12 interwiki widget, then 1/12 whitespace
- In the absence of interwiki widgets, search results width remains the same; whatever would be occupied by interwiki widgets remains blank
To confirm on:
- Vector with interwiki widget (https://en.wikipedia.org/w/index.php?title=Special:Search&fulltext=1&ns0=1&search=cat&useskin=vector-2022)
- Vector without interwiki widget (https://en.wikipedia.org/w/index.php?title=Special:Search&fulltext=1&ns0=1&search="Cats+in+Australia"&useskin=vector-2022)
- Legacy Vector with interwiki widget (https://en.wikipedia.org/w/index.php?title=Special:Search&fulltext=1&ns0=1&search=cat&useskin=vector)
- Legacy Vector without interwiki widget (https://en.wikipedia.org/w/index.php?title=Special:Search&fulltext=1&ns0=1&search="Cats+in+Australia"&useskin=vector)

















