From f501378751518ef19674908571fe13170210c968 Mon Sep 17 00:00:00 2001
From: Pier Francesco Ferrari <pierfrancesco@commercelayer.io>
Date: Wed, 16 Aug 2023 16:20:53 +0200
Subject: [PATCH] fix: fix mobile visualization of ListItemOrder

---
 .../app-elements/src/ui/resources/ListItemOrder.tsx    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/app-elements/src/ui/resources/ListItemOrder.tsx b/packages/app-elements/src/ui/resources/ListItemOrder.tsx
index d607b95db..fc3c32663 100644
--- a/packages/app-elements/src/ui/resources/ListItemOrder.tsx
+++ b/packages/app-elements/src/ui/resources/ListItemOrder.tsx
@@ -53,6 +53,7 @@ export const ListItemOrder = withSkeletonTemplate<Props>(
             />
           )
         }
+        alignItems='top'
         data-test-id='ListItemOrder'
         onClick={onClick}
         {...rest}
@@ -85,7 +86,13 @@ export const ListItemOrder = withSkeletonTemplate<Props>(
           </Text>
         </div>
         <div>
-          <Text tag='div' weight='semibold' data-test-id='ListItemOrder-total'>
+          <Text
+            tag='div'
+            weight='semibold'
+            data-test-id='ListItemOrder-total'
+            className='break-keep'
+            wrap='nowrap'
+          >
             {order.formatted_total_amount}
           </Text>
           <Text
@@ -94,6 +101,7 @@ export const ListItemOrder = withSkeletonTemplate<Props>(
             size='small'
             variant='info'
             data-test-id='ListItemOrder-payment'
+            wrap='nowrap'
           >
             {getOrderPaymentStatusName(order.payment_status)}
           </Text>