From e48d009668a77fd0fd32731531e2fe3cd36bed8f Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 9 Jan 2024 13:11:49 +1100
Subject: [PATCH] Hide #sort section instead of covering it

Before, the .form-actions was overlaying it, to avoid making the table below jump. But if the .form-actions and #sort are the same height, it won't jump when we swap them.

It does make the table jump in the case of a multi-line .form-actions message, but that only happens after submit anyway.

This is needed for the next commit..
---
 app/webpacker/css/admin/products_v3.scss | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index cc90b4c2a9..9114a43fba 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -22,8 +22,8 @@
   // Form actions floats over other controls when active
   #products-form {
     .form-actions {
-      position: absolute;
-      top: -1em;
+      // position: absolute;
+      // top: -1;
       left: 0;
       right: 0;
       z-index: 1; // Ensure tom-select and .disabled-section are covered
@@ -174,7 +174,8 @@
   }
 
   #sort {
-    margin-bottom: 1em;
+    margin-top: 3px; // Helps even up with .form-actions when visible
+    margin-bottom: 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -184,6 +185,10 @@
     line-height: $btn-relaxed-height;
     height: $btn-relaxed-height;
 
+    &.disabled-section {
+      display: none;
+    }
+
     .with-dropdown {
       display: flex;
       justify-content: space-between;
@@ -198,7 +203,7 @@
     grid-template-rows: 1fr;
     grid-column-gap: 20px;
     align-items: end;
-    margin-bottom: 20px;
+    margin-bottom: 1rem;
 
     .query {
       grid-column: 1 / span 3;