Implement search results filters and sort UI

[ramram-mf]

Description

Implements the Search 2.0 results page UI for desktop, tablet, and mobile.

Changes

• Adds content-type filtering for Articles, Research, Press Release, Event, and All.
• Adds query-relevant topic tag filters.
• Adds sorting by Relevance, Newest First, and Oldest First.
• Updates desktop results immediately when filters change.
• Adds the responsive Filter & Sort drawer for tablet and mobile.
• Updates the mobile “Display results (X)” count before applying filters.
• Adds responsive result cards with topic tags, media, title, author, date, and excerpt.
• Limits displayed card topics to three with an overflow count.
• Prefetches topic relations for the displayed page to avoid per-card queries.
• Prevents mobile preview requests from creating search analytics events.
• Adds modal focus management, keyboard trapping, Escape handling, and focus restoration.
• Matches the Figma hover, selected, spacing, dropdown, and close-control states.

Content types and topic tags currently allow one selection at a time, matching the existing backend contract. Per-content-type result counts remain out of scope.

Link to sample test page: https://foundation-s-tp1-3963-s-mw6pf1.mofostaging.net/en/search/?query=search
Related PRs/issues: Jira ticket

[beccaklam]

Hi @ramram-mf, this is looking great overall! I just have a bunch of nit-picky details. Happy to jump on a call to chat anything through:

General Feedback

• Selected topic tag in the filter should be one shade lighter (yellow-40 or #F7EC50)

• Is the orange color here #FFCEAE? It looks darker

• Can we align the bottom text of these? (see image below):

• Even when there's only one page can we show 'Page 1 of 1'? Right now the page count disappears if there's only one page.

• Can the image fill the whole height of the search result card (but still retain its proportions)?

• Can we increase the spacing between search results to 2rem? Seeing it live, the results feel a bit tight

Mobile Specific:

• Can we decrease the spacing between the 'filter & sort' button and the results to 16px? Current spacing below:

• Mobile filter is missing the orange outline (see figma). The close button also looks really small, can we try this export?

• The mobile filter also has a lot of unused white space? This is probably related to the tablet layout. Can we trim it so that on mobile the 'display results' button only has 24px of spacing between it and the filter controls?

[mergify]

Tick the box to add this pull request to the merge queue (same as @mergifyio queue).

• Queue this pull request

[beccaklam]

Hi @ramram-mf thank you for making all those changes! Just a few more 🙇🏻‍♀️ :

• I think the image proportions have been stretched here. I meant can the image fill the vertical height while still maintaining its 3:2 ratio proportions? So e.g. if the height is 146.2px the width should be 219.3px

• Can we actually make the filter on mobile and tablet full page and not an overlay? It's strange that someone could scroll past the filter only to see a greyed out screen. If the content exceeds the full screen, can we treat the content similar to what we did with the gallery project where a scroll bar appears but the button remains sticky at the bottom of the screen?

• Can we make the 'display results' button on mobile full width and increase the spacing between the filters and the button to 3rem? Can we also apply this to tablet? The spacing there is also too long.

• The 'x' in the close button looks off center. Can we center it?