Move search bar to top nav to test usage changes

What does this MR do and why?

This is usability experiment that will allow us to move search button to the top right corner for a group of users.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After

mobile

light	dark

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. In rails console enable the experiment fully

   Feature.enable(:search_button_top_right)

2. Visit any page http://127.0.0.1:3000
3. Test search button

Related to #480341 (closed)

app/assets/javascripts/super_sidebar/components/global_search/components/global_search_header_app.vue

@@ -3,6 +3,11 @@ import { GlModalDirective, GlTooltipDirective, GlIcon, GlButton } from '@gitlab/
 import { __, s__, sprintf } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { InternalEvents } from '~/tracking';
+import {
+  isNarrowScreen,
+  isNarrowScreenAddListener,
+  isNarrowScreenRemoveListener,
+} from '~/lib/utils/css_utils';
 import { SEARCH_MODAL_ID } from '../constants';
 import SearchModal from './global_search.vue';
 
@@ -31,8 +36,16 @@ export default {
   data() {
     return {
       searchTooltip: this.$options.i18n.searchKbdHelp,
+      isNarrowScreen: false,
     };
   },
+  mounted() {
+    this.isNarrowScreen = isNarrowScreen(this.$refs.buttonRoot);
+    isNarrowScreenAddListener(this.$refs.buttonRoot, this.handleNarrowScreenChange);
+  },
+  beforeDestroy() {
+    isNarrowScreenRemoveListener(this.$refs.buttonRoot, this.handleNarrowScreenChange);
+  },
   methods: {
     handleNarrowScreenChange({ matches }) {
       this.isNarrowScreen = matches;
@@ -51,18 +64,21 @@ export default {
   <div
     v-if="glFeatures.searchButtonTopRight"
     ref="buttonRoot"
-    class="gl-border gl-w-[300px] gl-rounded-base gl-border-gray-400"
+    :class="{ 'gl-border gl-w-[300px] gl-rounded-base gl-border-gray-400': !isNarrowScreen }"
   >
     <gl-button
       id="super-sidebar-search"
       v-gl-tooltip.bottom.html="searchTooltip"
       v-gl-modal="$options.SEARCH_MODAL_ID"
-      class="user-bar-button gl-w-[300px] !gl-justify-start"
+      :class="{
+        'user-bar-button gl-w-[300px] !gl-justify-start': !isNarrowScreen,
+        'border-0 shadow-none bg-transparent': isNarrowScreen,
+      }"
       data-testid="super-sidebar-search-button"
       @click="trackEvent('click_search_button_to_activate_command_palette', { label: 'top_right' })"
     >
       <gl-icon name="search" />
-      <span>{{ $options.i18n.searchBtnText }}</span>
+      <span v-if="!isNarrowScreen">{{ $options.i18n.searchBtnText }}</span>
     </gl-button>
     <search-modal @shown="hideSearchTooltip" @hidden="showSearchTooltip" />
   </div>