giphy: Style search input same as dropdown widget.

Fixes #26929

web/styles/popovers.css

@@ -919,31 +919,6 @@ ul {
         outline: 1px solid hsl(0deg 100% 50%);
     }
 
-    .search-box {
-        display: flex;
-        position: sticky;
-        padding: 2px;
-
-        & input {
-            flex-grow: 1;
-            margin: 5px;
-            border-radius: 3px;
-        }
-
-        .clear_search_button {
-            position: absolute;
-            top: 5px;
-            right: 3px;
-            font-size: 16px;
-
-            &:focus {
-                .fa-remove {
-                    outline: 2px solid var(--color-outline-focus);
-                }
-            }
-        }
-    }
-
     .giphy-scrolling-container {
         overflow: auto;
         height: 200px;

web/templates/giphy_picker.hbs

@@ -1,11 +1,8 @@
 <div id="giphy_grid_in_popover">
     <div class="arrow"></div>
     <div class="popover-inner">
-        <div class="search-box">
+        <div class="popover-filter-input-wrapper">
-            <input type="text" tabindex=0 id="giphy-search-query" class="search-query" placeholder="{{t 'Search GIFs' }}" />
+            <input type="text" id="giphy-search-query" class="popover-filter-input filter_text_input" placeholder="{{t 'Filter' }}" autofocus/>
-            <button type="button" class="btn clear_search_button" id="giphy_search_clear">
-                <i class="fa fa-remove" aria-hidden="true"></i>
-            </button>
         </div>
         <div class="giphy-scrolling-container" data-simplebar data-simplebar-tab-index="-1">
             {{! We need a container we can replace