Search CSS updates (#1979)

* Update styles

* Limit the height of the query parser

4 files changed, 45 insertions, 35 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;
diff --git a/ext/popup.html b/ext/popup.html
index 98ee7c45..5c9039f9 100644
--- a/ext/popup.html
+++ b/ext/popup.html
@@ -27,11 +27,13 @@
 
                     <span tabindex="-1" id="content-scroll-focus"></span>
 
-                    <div class="scan-disable" id="query-parser-container" hidden>
-                        <div class="search-option" id="query-parser-mode-container" hidden>
-                            <select id="query-parser-mode-select"></select>
+                    <div class="search-header">
+                        <div class="scan-disable scrollbar" id="query-parser-container" hidden>
+                            <div class="search-option" id="query-parser-mode-container" hidden>
+                                <select id="query-parser-mode-select"></select>
+                            </div>
+                            <div id="query-parser-content" lang="ja"></div>
                         </div>
-                        <div id="query-parser-content" lang="ja"></div>
                     </div>
 
                     <div id="dictionary-entries"></div>
diff --git a/ext/search.html b/ext/search.html
index de0cab58..03ee781f 100644
--- a/ext/search.html
+++ b/ext/search.html
@@ -28,33 +28,35 @@
 
                     <span tabindex="-1" id="content-scroll-focus"></span>
 
-                    <div id="intro">
-                        <h1>Yomichan Search</h1>
-                    </div>
+                    <div class="search-header">
+                        <div id="intro">
+                            <h1>Yomichan Search</h1>
+                        </div>
 
-                    <div class="scan-disable">
-                        <div class="search-options">
-                            <label class="search-option">
-                                <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                                <span class="search-option-label">Automatic kana conversion</span>
-                            </label>
-                            <label class="search-option" id="search-option-clipboard-monitor-container">
-                                <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                                <span class="search-option-label">Clipboard monitor</span>
-                            </label>
-                            <div class="search-option" id="query-parser-mode-container" hidden>
-                                <span class="search-option-pre-label">Parser:</span>
-                                <select id="query-parser-mode-select"></select>
+                        <div class="scan-disable">
+                            <div class="search-options">
+                                <label class="search-option">
+                                    <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                                    <span class="search-option-label">Automatic kana conversion</span>
+                                </label>
+                                <label class="search-option" id="search-option-clipboard-monitor-container">
+                                    <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                                    <span class="search-option-label">Clipboard monitor</span>
+                                </label>
+                                <div class="search-option" id="query-parser-mode-container" hidden>
+                                    <span class="search-option-pre-label">Parser:</span>
+                                    <select id="query-parser-mode-select"></select>
+                                </div>
+                            </div>
+                            <div class="search-textbox-container">
+                                <textarea id="search-textbox" class="scrollbar" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>
+                                <button id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
                             </div>
                         </div>
-                        <div class="search-textbox-container">
-                            <textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>
-                            <button id="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
-                        </div>
-                    </div>
 
-                    <div class="scan-disable" id="query-parser-container" hidden>
-                        <div id="query-parser-content" lang="ja"></div>
+                        <div class="scan-disable scrollbar" id="query-parser-container" hidden>
+                            <div id="query-parser-content" lang="ja"></div>
+                        </div>
                     </div>
 
                     <div id="dictionary-entries"></div>