Page MenuHomePhabricator

Search preview vertical alignment for small screens
Closed, ResolvedPublic

Description

As a follow-up to T323843
Figma places the quick search preview below the search controls

Tablet.png (1×1 px, 160 KB)

Presently (in wmf.4) the search preview will be placed much higher than in the figma. When the screen width is below 1200px, the search preview will start overlapping the search fields.

Screen Shot 2023-04-13 at 4.11.26 PM.png (1×2 px, 596 KB)
Screen Shot 2023-04-13 at 4.12.29 PM.png (1×2 px, 605 KB)

Event Timeline

Aklapper renamed this task from Search preview vertical alignement for small screens to Search preview vertical alignment for small screens.Apr 14 2023, 4:24 AM

Hi Elena, myself and Simone discussed this issue and there are some issues with having very little preview space in landscape view on tablets or even certain browser sizes, if we show it below search controls. Hence we decided to leave it as is for now assuming that on desktop the overlap situation will not happen. However it seems the preview position changed a bit, previously it used to not overlap page numbers now it does. I wonder what happened there. cc @SimoneThisDot

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

[mediawiki/extensions/SearchVue@master] Search preview vertical alignment for small screens

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

I have fixed the top heading issue in the latest patch

Change 924367 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Search preview vertical alignment for small screens

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

I have fixed the top heading issue in the latest patch

Thx, @SimoneThisDot! The preview doesn't overlap the number of search results anymore and it behaves well on smaller screens:

Screen Shot 2023-06-08 at 8.50.45 PM.png (1×3 px, 1 MB)
Screen Shot 2023-06-08 at 8.51.42 PM.png (1×2 px, 895 KB)