From 7556eee5d4a2504ecea79f56c52f0c99c428e9d3 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 28 Nov 2022 11:13:25 +0100
Subject: [PATCH] Do not `display: flex;` a td but its child

Actually, having `td.actions` with `display: flex;` cancel the `table-cell` height computation and it's then impossible to solve.
The solution here is to have a child (`div.flex`) that is `display: flex` and then the parent `td` can compute its height (as the same than its current row).
---
 app/views/spree/admin/orders/index.html.haml  | 22 +++++++++----------
 .../css/admin/v2/components/tables.scss       |  2 ++
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/views/spree/admin/orders/index.html.haml b/app/views/spree/admin/orders/index.html.haml
index a12de2d13e..1ca1753f19 100644
--- a/app/views/spree/admin/orders/index.html.haml
+++ b/app/views/spree/admin/orders/index.html.haml
@@ -95,17 +95,17 @@
       %td.align-center
         %span{'ng-bind-html' => 'order.display_total'}
       %td.actions
-        %div.row-loading-icons
-          %div{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}, style: "width: 30px; height: 30px;"}
-            = render partial: "components/spinner"
-          %i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} }
-          %i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')}
-        %a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')}
-        %div{'ng-if' => 'order.ready_to_ship'}
-          %button.icon-road.icon_link.with-tip.no-text{'ng-click' => 'shipOrder(order)', rel: 'nofollow', 'ofn-with-tip' => t('.ship')}
-        %div{'ng-if' => 'order.ready_to_capture'}
-          %button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')}
-
+        .flex
+          %div.row-loading-icons
+            %div{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}, style: "width: 30px; height: 30px;"}
+              = render partial: "components/spinner"
+            %i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} }
+            %i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')}
+          %a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')}
+          %div{'ng-if' => 'order.ready_to_ship'}
+            %button.icon-road.icon_link.with-tip.no-text{'ng-click' => 'shipOrder(order)', rel: 'nofollow', 'ofn-with-tip' => t('.ship')}
+          %div{'ng-if' => 'order.ready_to_capture'}
+            %button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')}
 .sixteen.columns.alpha#loading{ 'ng-show' => 'RequestMonitor.loading' }
   = render partial: "components/admin_spinner"
   %h1
diff --git a/app/webpacker/css/admin/v2/components/tables.scss b/app/webpacker/css/admin/v2/components/tables.scss
index ae7a2b26f0..f9bcc74f6d 100644
--- a/app/webpacker/css/admin/v2/components/tables.scss
+++ b/app/webpacker/css/admin/v2/components/tables.scss
@@ -30,6 +30,8 @@ table tbody tr {
     border-bottom: 2px solid $v2-medium-light-grey;
     &.actions {
       border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important
+    }
+    > .flex {
       display: flex;
       column-gap: 10px;
     }