From b884ec8295fbb75b338cfaf75911268fc89ec36a Mon Sep 17 00:00:00 2001
From: Kuuuube <61125188+Kuuuube@users.noreply.github.com>
Date: Mon, 24 Jun 2024 14:05:59 -0400
Subject: Make search sizing more sensible due to search textbox and query now
 being sticky (#1127)

* Move search height into variables

* Lock max query height to roughly 2-2.5 lines

* Reduce search textbox max height to 5 lines
---
 ext/css/display.css |  1 +
 ext/css/search.css  | 16 ++++++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

(limited to 'ext')

diff --git a/ext/css/display.css b/ext/css/display.css
index 68f7bf11..4923318a 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -605,6 +605,7 @@ button.sidebar-button.sidebar-button-highlight {
     margin-top: 0.5em;
     font-size: var(--query-parser-font-size);
     white-space: pre-wrap;
+    max-height: calc(var(--query-parser-font-size) * 2);
 }
 #query-parser-content[data-term-spacing=true] .query-parser-term {
     margin-right: 0.2em;
diff --git a/ext/css/search.css b/ext/css/search.css
index 6bb20d42..a7f5f0da 100644
--- a/ext/css/search.css
+++ b/ext/css/search.css
@@ -27,6 +27,10 @@
 
     --background-color: #ffffff;
     --separator-color1: #cccccc;
+
+    --search-textbox-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2);
+    --search-textbox-min-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2);
+    --search-textbox-max-height: calc(var(--textarea-line-height) * 5 + var(--textarea-padding) * 2);
 }
 :root:not([data-loaded=true]) {
     --animation-duration: 0s;
@@ -79,9 +83,9 @@ h1 {
     border: 0;
     outline: none;
     width: 100%;
-    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);
+    height: var(--search-textbox-height);
+    min-height: var(--search-textbox-min-height);
+    max-height: var(--search-textbox-max-height);
     resize: none;
     font-size: var(--font-size);
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -92,9 +96,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);
+    height: var(--search-textbox-height);
+    min-height: var(--search-textbox-min-height);
+    max-height: var(--search-textbox-max-height);
     background-color: var(--input-background-color);
     border: 0;
     padding: 0;
-- 
cgit v1.2.3