From ddda3202ef755114f785d42883f21b0237bb4209 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 15 Nov 2023 17:09:31 +1100
Subject: [PATCH] Style stock popout

---
 app/views/admin/products_v3/_table.html.haml |  4 +--
 app/webpacker/css/admin/products_v3.scss     | 35 +++++++++++++++++++-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml
index 72cc419c1259..bac2d06cbe08 100644
--- a/app/views/admin/products_v3/_table.html.haml
+++ b/app/views/admin/products_v3/_table.html.haml
@@ -82,8 +82,8 @@
                 %td.field
                   = variant_form.text_field :price, 'aria-label': t('admin.products_page.columns.price'), value: number_to_currency(variant.price, unit: '')&.strip # TODO: add a spec to prove that this formatting is necessary. If so, it should be in a shared form helper for currency inputs
                   = error_message_on variant, :price
-                %td.field
-                  %div.on-hand__wrapper
+                %td.field.on-hand__wrapper
+                  %div.on-hand__popout
                     .field
                       = variant_form.number_field :on_hand, 'aria-label': t('admin.products_page.columns.on_hand')
                       = error_message_on variant, :on_hand
diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index 2764f4b95468..949575b7f50b 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -114,8 +114,17 @@
       }
     }
 
+    .field {
+      padding: 0;
+      margin-bottom: 0.75em;
+    }
+
+    label {
+      margin: 0;
+    }
+
     // "Naked" inputs. Row hover helps reveal them.
-    input {
+    input:not([type="checkbox"]) {
       border-color: transparent;
       background-color: $color-tbl-cell-bg;
       height: auto;
@@ -265,4 +274,28 @@
       z-index: 1; // Ensure tom-select is covered
     }
   }
+
+  // Stock popout widget
+  .on-hand {
+    &__wrapper {
+      position: relative;
+    }
+    &__popout {
+      position: absolute;
+      top: -1em;
+      left: -1em;
+      z-index: 1; // Cover below row when hover
+      width: 9em;
+
+      padding: $padding-tbl-cell;
+
+      background: $color-tbl-cell-bg;
+      border-radius: 3px; //todo: check
+      box-shadow: 0px 0px 8px 0px rgba($near-black, 0.25);
+
+      .field:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }