Page MenuHomePhabricator

Bring the new mobile search experience into Vector on small viewports
Open, MediumPublic3 Estimated Story Points

Description

Background

Now that the new mobile search experience is deployed everywhere, we can reuse that experience in Vector to improve the search experience in small viewports, and improve the design.

User story

As a user I want a unified search experience across all viewports and skins

Requirements

  • Vector uses the new experience we built.

Test Steps

  • Test the search experience on Vector on all viewports
  • Test the search experience on Vector while moving inbetween different viewports
  • Ensure the sticky header search experience is still working normally

Design

  • none

Acceptance criteria

  • Code for the existing experience of the expanding search bar after clicking the search icon can be removed
  • Same experience in minerva and vector

Communication criteria - does this need an announcement or discussion?

  • yes, this needs communication consideration

Rollback plan

  • What is the rollback plan in production for this task if something goes wrong?

Details

Event Timeline

bwang triaged this task as Medium priority.Jul 24 2025, 9:09 PM

Change #1172407 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] POC: Use new search experience on Vector

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://ac0757f470.catalyst.wmcloud.org/w/

There seems to be a unintended looking misalignment happening on narrow viewports:

image.png (240×872 px, 21 KB)

Jdlrobson set the point value for this task to 2.Sep 5 2025, 2:55 PM

There seems to be a unintended looking misalignment happening on narrow viewports:

image.png (240×872 px, 21 KB)

I believe this is the intended design? its how it looks on mobile as well.
@Sneha what do you think?

I think that given the discussion in the POC here (https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1172407/comment/82904c96_581a3f45/) i would like to propose increasing this to a 3

SToyofuku-WMF changed the point value for this task from 2 to 3.Nov 17 2025, 9:06 PM
SToyofuku-WMF subscribed.

yolo

@bwang In the example above, the icon and text seems to be in the same position as search results as you can see in the screenshot below. Because search result thumbnails are a certain size it looks okay while the search icon here is not the same size its making it look misaligned. Usually you see article matches, so this case may not be very common so I think it is okay to leave as is. Because fixing the alignment here will result in misalignment in the case below.

IMG_5869.jpg (1×1 px, 180 KB)

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://cabaf3c9a1.catalyst.wmcloud.org/w/

Here is another option. To align the search icon to the left of thumbnail and moving text closer to it in all cases

Group 43.png (340×391 px, 64 KB)

Change #1207240 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/core@master] TypeaheadSearch: ensure fix for mobile keyboard is only applied when the search is using the mobile experience

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

Test wiki on [[ | Patch demo ]] by BWang (WMF) using patch(es) linked to this task was deleted:

https://cabaf3c9a1.catalyst.wmcloud.org/w/