From 655dc922464a932fffe396b8da98c434a1b48d2d Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Mon, 29 Jul 2024 15:02:03 +1000
Subject: [PATCH 1/3] =?UTF-8?q?Clean=20up=20wacky=20input=20styles=20?=
 =?UTF-8?q?=F0=9F=94=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Trying to style a pretend input just doesn't work in practice, it resulted in a couple of style issues.
Let's keep it simple,
---
 app/webpacker/css/admin/products_v3.scss | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index fd292a3a39..a7622faf7c 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -257,31 +257,20 @@
       min-width: 15em;
 
       .search-input {
-        width: 100%;
         position: relative;
-        background-color: $lighter-grey;
-        border: 1px solid $lighter-grey;
-        border-radius: 4px;
-        height: $btn-relaxed-height;
-        line-height: $btn-relaxed-height;
-
-        &:has(input:focus),
-        &:has(input:active) {
-          border: 1px solid $dark-blue;
-        }
 
         > input {
-          // Totally hide the input from its container
-          background-color: transparent;
-          border: none;
-          width: calc(100% - 30px); // 30px is the width of the search icon + padding
+          padding-left: 33px;
+          width: 100%;
         }
 
         &:before {
+          position: absolute;
           font-family: FontAwesome;
           content: "\f002";
           color: $near-black;
           font-size: 16px;
+          margin-top: 0.7rem;
           margin-left: 10px;
         }
       }

From 32aacbd2b097c60ae6e901c820521574038c74a0 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Mon, 29 Jul 2024 15:13:30 +1000
Subject: [PATCH 2/3] =?UTF-8?q?Don't=20use=20fixed=20heights=20?=
 =?UTF-8?q?=F0=9F=94=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Just don't. It makes life hard and doesn't solve the problem properly.

Now, when the content doesn't fit within the screen width, it will flow naturally and not jump up and down all over other elements.
---
 app/webpacker/css/admin/products_v3.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index a7622faf7c..2bef018b53 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -220,9 +220,6 @@
     justify-content: space-between;
     align-items: center;
 
-    line-height: $btn-relaxed-height;
-    height: $btn-relaxed-height;
-
     &.disabled-section {
       display: none;
     }

From ec3c157f1e248c45e039f97730eaafdd63f847fb Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Mon, 29 Jul 2024 15:20:36 +1000
Subject: [PATCH 3/3] Add gap between elements

It could be done better, but requires more code cleanup than it's worth.
---
 app/webpacker/css/admin/products_v3.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index 2bef018b53..32dc4c5cda 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -226,6 +226,7 @@
 
     .pagination-description {
       flex-grow: 1; // Grow to fill space
+      margin-right: 1em; // TODO: cleanup and use flex gap
     }
 
     .with-dropdown {