Display view more list inline

[MAILPOET-5492]

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;
       }
     }

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>
         ))
       : [];