//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 [[ https://phabricator.wikimedia.org/T320577#8327049 | 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 | {F35597115} | {F35596431} | {F35596433} | {F35596435} | {F35596449} |
| new vector | {F35597116} | {F35596437} | {F35596439} | {F35596441} | {F35596451} |