From 51fe187fbb031302269f34bf4f14f38cd07695f1 Mon Sep 17 00:00:00 2001
From: Cinder <cinder@e621.net>
Date: Wed, 29 Jan 2025 13:37:11 -0800
Subject: [PATCH] [Posts] Posts searchbar and layout fixes (#868)

* Remove the strange search button styles on the posts/show page
* Remove debug console output
* Tweak the searchbar styles to be consistent across the pages
---
 app/javascript/src/javascripts/post_search.js | 16 +++++++++-------
 .../src/styles/common/post_search.scss        | 19 +++++++++++++------
 .../src/styles/common/z_responsive.scss       | 16 ----------------
 3 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/app/javascript/src/javascripts/post_search.js b/app/javascript/src/javascripts/post_search.js
index 5b2505d20..78cb1a5ea 100644
--- a/app/javascript/src/javascripts/post_search.js
+++ b/app/javascript/src/javascripts/post_search.js
@@ -19,25 +19,28 @@ PostSearch.initialize_input = function ($form) {
 
   // Adjust the number of rows based on input length
   $textarea
-    .on("input", () => {
-      $textarea.css("height", 0);
-      $textarea.css("height", element.scrollHeight + "px");
-    })
+    .on("input", recalculateInputHeight)
     .on("keypress", function (event) {
       if (event.which !== 13 || event.shiftKey) return;
       event.preventDefault();
       $textarea.closest("form").submit();
     });
 
+  $(window).on("resize", recalculateInputHeight);
+
   // Reset default height
-  $textarea.trigger("input");
+  recalculateInputHeight();
+
+  function recalculateInputHeight () {
+    $textarea.css("height", 0);
+    $textarea.css("height", element.scrollHeight + "px");
+  }
 };
 
 PostSearch.initialize_wiki_preview = function ($preview) {
   let visible = LStorage.Posts.WikiExcerpt;
   if (visible)
     $preview.removeClass("hidden");
-  console.log("init", visible);
 
   $($preview.find("a.wiki-excerpt-toggle")).on("click", (event) => {
     event.preventDefault();
@@ -45,7 +48,6 @@ PostSearch.initialize_wiki_preview = function ($preview) {
     visible = !visible;
     $preview.toggleClass("hidden", !visible);
     LStorage.Posts.WikiExcerpt = visible;
-    console.log("state", visible);
 
     return false;
   });
diff --git a/app/javascript/src/styles/common/post_search.scss b/app/javascript/src/styles/common/post_search.scss
index 48555aa85..68ce953d4 100644
--- a/app/javascript/src/styles/common/post_search.scss
+++ b/app/javascript/src/styles/common/post_search.scss
@@ -14,7 +14,9 @@
 
       // Override default texarea styles
       font-family: Verdana, sans-serif;
-      font-size: 1.05em;
+      font-size: 1rem;
+      line-height: 1rem;
+      padding: 0.5rem 0 0.5rem 0.5rem;
 
       // Remove old styles from z_responsive
       vertical-align: unset;
@@ -28,11 +30,9 @@
       // Disable manual resizing
       resize: none;
 
-      flex: 1;
-      padding: 0.5em;
-
       border-radius: 3px 0 0 3px;
       box-sizing: border-box;
+      flex: 1;
 
       &:focus, &:focus + button[type="submit"] { background: #FFC; }
     }
@@ -43,13 +43,20 @@
       font-size: unset;
       max-width: unset;
 
-      font-size: 1em;
-      padding: 0.5em;
+      font-size: 1rem;
+      line-height: 1rem;
+      padding: 0.5rem;
 
       border-radius: 0 3px 3px 0;
       background: white;
 
       span { display: none; }
     }
+
+    @include window-larger-than(800px) {
+      textarea, button[type="submit"] {
+        font-size: 0.85rem;
+      }
+    }
   }
 }
diff --git a/app/javascript/src/styles/common/z_responsive.scss b/app/javascript/src/styles/common/z_responsive.scss
index e960794be..df89c65fe 100644
--- a/app/javascript/src/styles/common/z_responsive.scss
+++ b/app/javascript/src/styles/common/z_responsive.scss
@@ -67,22 +67,6 @@
       }
     }
 
-    div#page aside#sidebar {
-      padding: 5px;
-
-      input#tags {
-        width: 80%;
-      }
-
-      button[type=submit] {
-        font-size: 1.2em;
-        background-color: #EEE;
-        height: 42px;
-        padding: 2px 10px;
-        border: 1px solid rgb(197, 197, 197);
-      }
-    }
-
     div#page {
 
       > div /* div#c-$controller */