From 6e5c69f35b347ffe4f12b45670f9e1bcd195e3f5 Mon Sep 17 00:00:00 2001
From: Jan Jakes <jan.jakes@automattic.com>
Date: Thu, 27 Jul 2023 13:37:32 +0200
Subject: [PATCH] Display view more list inline

[MAILPOET-5492]
---
 .../components-automation-analytics/tabs/orders.scss   | 10 ++++++++++
 .../components/tabs/orders/cells/products.tsx          |  5 ++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/mailpoet/assets/css/src/components-automation-analytics/tabs/orders.scss b/mailpoet/assets/css/src/components-automation-analytics/tabs/orders.scss
index f58118da55..e191f319a4 100644
--- a/mailpoet/assets/css/src/components-automation-analytics/tabs/orders.scss
+++ b/mailpoet/assets/css/src/components-automation-analytics/tabs/orders.scss
@@ -29,16 +29,26 @@
 
   .mailpoet-automations-analytics-order-products {
     align-items: center;
+    column-gap: 8px;
     display: flex;
+    flex-wrap: wrap;
 
     .quantity {
       color: $color-gutenberg-grey-700;
     }
 
     .woocommerce-view-more-list {
+      margin: 0;
+      padding: 0;
+
       button {
         background: transparent;
         border-radius: 0;
+        height: auto;
+        line-height: inherit;
+        margin: 0;
+        overflow: visible;
+        padding: 0;
         text-decoration: underline dotted;
       }
     }
diff --git a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/orders/cells/products.tsx b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/orders/cells/products.tsx
index a27b4d9dc8..84896ab68a 100644
--- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/orders/cells/products.tsx
+++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/orders/cells/products.tsx
@@ -1,5 +1,4 @@
 import { ViewMoreList as WooViewMoreList } from '@woocommerce/components';
-import { Fragment } from '@wordpress/element';
 import { OrderDetails } from '../../../../store';
 
 // WooViewMoreList has return type annotated as Object
@@ -11,10 +10,10 @@ export function ProductsCell({ order }: { order: OrderDetails }) {
   const items =
     order.products.length > 0
       ? order.products.map((item) => (
-          <Fragment key={`key-${item.id}`}>
+          <span key={`key-${item.id}`}>
             {item.name}&nbsp;
             <span className="quantity">({item.quantity}&times;)</span>
-          </Fragment>
+          </span>
         ))
       : [];