From 9720e4cfa9a02bb0d412183709f70541b2653bef Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Thu, 19 Sep 2019 14:20:47 -0500
Subject: [PATCH] css: fix positioning of search button in tag search box.

Fixes the search button wrapping to the next line in Firefox. Also fixes
the search box to be full width with no gap between the search box and
the search button.
---
 app/javascript/src/styles/common/main_layout.scss  | 14 --------------
 app/javascript/src/styles/specific/posts.scss      | 10 ++++++++++
 .../src/styles/specific/z_responsive.scss          |  2 +-
 app/views/posts/partials/common/_search.html.erb   |  5 +++--
 4 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/app/javascript/src/styles/common/main_layout.scss b/app/javascript/src/styles/common/main_layout.scss
index f78ac6f77..68b335007 100644
--- a/app/javascript/src/styles/common/main_layout.scss
+++ b/app/javascript/src/styles/common/main_layout.scss
@@ -32,20 +32,6 @@ div#page {
       list-style-type: none;
     }
 
-    input[type=text] {
-      /* ensure expanded search box renders above post thumbnails. */
-      z-index: 1;
-      position: relative;
-    }
-
-    button[type=submit] {
-      padding: 2px 6px;
-    }
-
-    #search-box button[type=submit] {
-      border-left: none;
-    }
-
     #options-box i.fa-bookmark {
       margin-right: 0.25em;
     }
diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss
index 56245e359..7bb63ae65 100644
--- a/app/javascript/src/styles/specific/posts.scss
+++ b/app/javascript/src/styles/specific/posts.scss
@@ -279,6 +279,16 @@ div#c-posts {
     margin-left: 1em;
   }
 
+  #search-box-form {
+    display: flex;
+
+    #search-box-submit {
+      padding: 2px 6px;
+      border-left: none;
+      border-radius: 0px;
+    }
+  }
+
   div#a-index {
     menu#post-sections {
       margin-bottom: 0.5em;
diff --git a/app/javascript/src/styles/specific/z_responsive.scss b/app/javascript/src/styles/specific/z_responsive.scss
index 0acf567c6..7da4a39e8 100644
--- a/app/javascript/src/styles/specific/z_responsive.scss
+++ b/app/javascript/src/styles/specific/z_responsive.scss
@@ -33,7 +33,7 @@
     padding: 5px;
 
     input#tags {
-      width: 80%;
+      min-width: 0px;
     }
 
     button[type=submit] {
diff --git a/app/views/posts/partials/common/_search.html.erb b/app/views/posts/partials/common/_search.html.erb
index c1ed001b2..f385ff0ed 100644
--- a/app/views/posts/partials/common/_search.html.erb
+++ b/app/views/posts/partials/common/_search.html.erb
@@ -2,14 +2,15 @@
 
 <section id="search-box">
   <h1>Search</h1>
-  <%= form_tag(path, :method => "get") do %>
+  <%= form_tag(path, method: "get", id: "search-box-form") do %>
     <% if params[:raw] %>
       <%= hidden_field_tag :raw, params[:raw] %>
     <% end %>
     <% if params[:random] %>
       <%= hidden_field_tag :random, params[:random] %>
     <% end %>
-    <%= text_field_tag("tags", tags, :id => tags_dom_id, :"data-shortcut" => "q", :"data-autocomplete" => "tag-query") %><%= content_tag "button", content_tag("i", nil, class: "fas fa-search"), type: "submit" %>
+    <%= text_field_tag("tags", tags, :id => tags_dom_id, :"data-shortcut" => "q", :"data-autocomplete" => "tag-query") %>
+    <button id="search-box-submit" type="submit"><i class="fas fa-search"></i></button>
     <%= hidden_field_tag "ms", "1" %>
   <% end %>
 </section>