From 37d1113e4c337ebcdbc1debac20cb81a42962501 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 8 Aug 2023 17:20:30 +1000
Subject: [PATCH] Align row headers with input contents

Inputs add extra padding, so we add the same padding to the header. Using an opt-in class, because I think we won't want this on all columns.
---
 app/views/admin/products_v3/_table.html.haml      | 2 +-
 app/webpacker/css/admin/globals/variables.scss    | 2 ++
 app/webpacker/css/admin/products_v3.scss          | 6 ++++++
 app/webpacker/css/admin/shared/forms.scss         | 2 +-
 app/webpacker/css/admin_v3/globals/variables.scss | 8 +++++---
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml
index a6ffbf0b82..e2c57f8b30 100644
--- a/app/views/admin/products_v3/_table.html.haml
+++ b/app/views/admin/products_v3/_table.html.haml
@@ -22,7 +22,7 @@
     %col{ width:"5%", style: "max-width:5em" }
     %thead
       %tr
-        %th.align-left= t('admin.products_page.columns.name')
+        %th.align-left.with-input= t('admin.products_page.columns.name')
         %th.align-right= t('admin.products_page.columns.sku')
         %th.align-right= t('admin.products_page.columns.unit')
         %th.align-right= t('admin.products_page.columns.price')
diff --git a/app/webpacker/css/admin/globals/variables.scss b/app/webpacker/css/admin/globals/variables.scss
index 86fb56b7af..7ea08bbc7d 100644
--- a/app/webpacker/css/admin/globals/variables.scss
+++ b/app/webpacker/css/admin/globals/variables.scss
@@ -67,6 +67,8 @@ $color-sel-hover-text:           $color-1 !default;
 $color-txt-brd:                  $color-border !default;
 $color-txt-text:                 $color-3 !default;
 $color-txt-hover-brd:            $color-2 !default;
+$vpadding-txt:                   7px;
+$hpadding-txt:                   10px;
 
 // Modal colors
 $color-modal-close-btn:          $color-5 !default;
diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index 688015bffe..5b5cb2fe9c 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -23,6 +23,12 @@
     padding: 4px;
     border-collapse: separate; // This is needed for the outer padding. Also should be helpful to give more flexibility of borders between rows.
 
+    // Additional horizontal padding to align with input contents
+    thead th.with-input {
+      padding-left: $padding-tbl-cell + $hpadding-txt;
+      padding-right: $padding-tbl-cell + $hpadding-txt;
+    }
+
     // Row hover
     tr:hover {
       td {
diff --git a/app/webpacker/css/admin/shared/forms.scss b/app/webpacker/css/admin/shared/forms.scss
index 4f11d677fc..da593e3300 100644
--- a/app/webpacker/css/admin/shared/forms.scss
+++ b/app/webpacker/css/admin/shared/forms.scss
@@ -8,7 +8,7 @@ input[type="number"],
 textarea,
 fieldset {
   @include border-radius($border-radius);
-  padding: 7px 10px;
+  padding: $vpadding-txt $hpadding-txt;
   border: 1px solid $color-txt-brd;
   color: $color-txt-text;
   font-size: 90%;
diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index cf8fa70498..89a15caee4 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -33,9 +33,9 @@ $color-tbl-cell-shadow:          rgb(0, 0, 0, 0.15) !default;
 $color-tbl-thead-txt:            $color-headers !default;
 $color-tbl-thead-bg:             $light-grey !default;
 $color-tbl-border:               $pale-blue !default;
-$padding-tbl-cell:               12px 12px;
+$padding-tbl-cell:               12px;
 $padding-tbl-cell-condensed:     10px 12px;
-$padding-tbl-cell-relaxed:       16px 12px;
+$padding-tbl-cell-relaxed:       12px 12px;
 
 // Button colors
 $color-btn-bg:                   $teal !default;
@@ -70,10 +70,12 @@ $color-sel-text:                 $white !default;
 $color-sel-hover-bg:             lighten($color-sel-bg, 2) !default;
 $color-sel-hover-text:           $white !default;
 
-// Text inputs colors
+// Text inputs styles
 $color-txt-brd:                  $color-border !default;
 $color-txt-text:                 $near-black !default;
 $color-txt-hover-brd:            $teal !default;
+$vpadding-txt:                   5px;
+$hpadding-txt:                   8px;
 
 // Modal colors
 $color-modal-close-btn:          $color-5 !default;