From 6ba18cb87d3a0ef0db7b0779c86a4c800c33a987 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Tue, 19 Aug 2025 19:45:54 +0300
Subject: [PATCH] refactor(order-card): enhance layout and styling for order
 state display

- Updated the layout of the OrderCard component to improve responsiveness and visual clarity.
- Adjusted flex properties for better alignment and spacing of elements.
- Moved the order state badge into a dedicated div for improved styling control.
---
 apps/web/components/shared/order-card.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/shared/order-card.tsx b/apps/web/components/shared/order-card.tsx
index 72987e2..a159764 100644
--- a/apps/web/components/shared/order-card.tsx
+++ b/apps/web/components/shared/order-card.tsx
@@ -31,10 +31,10 @@ export function OrderCard({
             {order.order_number}
           </span>
         )}
-        <div className="flex flex-col">
+        <div className="flex min-w-0 flex-1 flex-col">
           <div className="flex items-center gap-4">
             {customer && <CustomerAvatar customer={customer} />}
-            <div className="flex flex-col">
+            <div className="flex min-w-0 flex-1 flex-col">
               <ReadonlyTimeRange
                 datetimeEnd={order?.datetime_end}
                 datetimeStart={order?.datetime_start}
@@ -48,7 +48,7 @@ export function OrderCard({
             </div>
           </div>
         </div>
-        {order?.state && getBadge(order.state)}
+        <div className="ml-2 shrink-0">{order?.state && getBadge(order.state)}</div>
       </div>
     </Link>
   );