Fix firefox search button 1px off of search textbox (#1115)

2 files changed, 15 insertions, 6 deletions

diff --git a/ext/css/search.css b/ext/css/search.css
index 908f1975..808a7045 100644
--- a/ext/css/search.css
+++ b/ext/css/search.css
@@ -63,7 +63,7 @@ h1 {
     display: flex;
     flex-flow: row nowrap;
     width: 100%;
-    align-items: stretch;
+    align-items: center;
     margin: 0;
     padding: 0;
     border: 0;
@@ -92,6 +92,9 @@ h1 {
     flex: 0 0 auto;
     position: relative;
     width: 2.5em;
+    height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2);
+    min-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2);
+    max-height: calc(var(--textarea-line-height) * 10 + var(--textarea-padding) * 2);
     background-color: var(--input-background-color);
     border: 0;
     padding: 0;
diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js
index 8dad19d7..b0f0d8e8 100644
--- a/ext/js/display/search-display-controller.js
+++ b/ext/js/display/search-display-controller.js
@@ -566,14 +566,20 @@ export class SearchDisplayController {
      * @param {boolean} shrink
      */
     _updateSearchHeight(shrink) {
-        const node = this._queryInput;
+        const searchTextbox = this._queryInput;
+        const searchItems = [this._queryInput, this._searchButton, this._searchBackButton];
+
         if (shrink) {
-            node.style.height = '0';
+            for (const searchButton of searchItems) {
+                searchButton.style.height = '0';
+            }
         }
-        const {scrollHeight} = node;
-        const currentHeight = node.getBoundingClientRect().height;
+        const {scrollHeight} = searchTextbox;
+        const currentHeight = searchTextbox.getBoundingClientRect().height;
         if (shrink || scrollHeight >= currentHeight - 1) {
-            node.style.height = `${scrollHeight}px`;
+            for (const searchButton of searchItems) {
+                searchButton.style.height = `${scrollHeight}px`;
+            }
         }
     }