Recent searches on mobile cause client-server mismatch

[obulat]

Description

The Recent searches on mobile cause client-server mis-match and re-rendering.

Reproduction

1. Open the `new header` version of the search on a mobile screen.
2. See warnings in the console.

Screenshots

Parent:  
<ul id="recent-searches-list" role="listbox" aria-label="Recent searches">
[vue.common.dev.js:6908](webpack:///node_modules/.pnpm/vue@2.7.10/node_modules/vue/dist/vue.common.dev.js)
Mismatching childNodes vs. VNodes:  
NodeList [ li#option-0.description-regular.my-1.rounded-sm.border-1.5.p-2.hover:bg-dark-charcoal-10.border-tx
 ]
 
Array(4) [ {…}, {…}, {…}, {…} ]
[vue.common.dev.js:6909](webpack:///node_modules/.pnpm/vue@2.7.10/node_modules/vue/dist/vue.common.dev.js)
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Additional context

We should wrap the Recent searches component in the mobile header in a ClientOnly component.