Search CSS updates (#1979)

* Update styles

* Limit the height of the query parser

2 files changed, 14 insertions, 8 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index 58cd23eb..b82a09d5 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -568,7 +568,13 @@ button.sidebar-button.sidebar-button-highlight {
 
 
 /* Search page */
+.search-header {
+    display: flex;
+    flex-flow: column nowrap;
+    max-height: 100vh;
+}
 #query-parser-container {
+    overflow-y: auto;
     padding-left: var(--entry-horizontal-padding);
     padding-right: var(--entry-horizontal-padding);
     padding-bottom: 0.25em;
diff --git a/ext/css/search.css b/ext/css/search.css
index f529fbb6..593bbe6c 100644
--- a/ext/css/search.css
+++ b/ext/css/search.css
@@ -87,7 +87,7 @@ h1 {
     white-space: pre-wrap;
     z-index: 1;
 }
-#search-button {
+.search-button {
     flex: 0 0 auto;
     position: relative;
     width: 2.5em;
@@ -100,22 +100,22 @@ h1 {
     transition: background-color var(--animation-duration) ease-in-out;
     border-radius: 0;
 }
-#search-button:hover,
-#search-button:focus {
+.search-button:hover,
+.search-button:focus {
     background-color: var(--input-background-color-dark);
 }
-#search-button:focus:not(:focus-visible):not(:hover) {
+.search-button:focus:not(:focus-visible):not(:hover) {
     background-color: var(--input-background-color);
 }
-#search-button:focus-visible {
+.search-button:focus-visible {
     background-color: var(--input-background-color-dark);
 }
-#search-button:active,
-#search-button:active:focus {
+.search-button:active,
+.search-button:active:focus {
     background-color: var(--input-background-color-darker);
 }
 
-#search-button>.icon {
+.search-button>.icon {
     display: block;
     position: absolute;
     left: 0;