From 1425e39183f8126fe8328c9f45a3ad19416c1e15 Mon Sep 17 00:00:00 2001
From: vincent <vincent@sleede.com>
Date: Thu, 29 Sep 2022 11:36:56 +0200
Subject: [PATCH] (ui) Fix order-item layout

---
 .../components/store/order-item.tsx           | 16 +++++++-----
 .../stylesheets/modules/store/order-item.scss | 26 ++++++++++++++++---
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/app/frontend/src/javascript/components/store/order-item.tsx b/app/frontend/src/javascript/components/store/order-item.tsx
index 3fd238bc8..fcaf37598 100644
--- a/app/frontend/src/javascript/components/store/order-item.tsx
+++ b/app/frontend/src/javascript/components/store/order-item.tsx
@@ -48,14 +48,16 @@ export const OrderItem: React.FC<OrderItemProps> = ({ order, currentUser }) => {
       }
       <div className="date">
         <span>{t('app.shared.store.order_item.created_at')}</span>
-        <div>{FormatLib.date(order.created_at)}
-          <div className="fab-tooltip">
-            <span className="trigger"><PlusCircle size={16} weight="light" /></span>
-            <div className="content">
-              {t('app.shared.store.order_item.last_update')}<br />
-              {FormatLib.date(order.updated_at)}
+        <div>
+          <p>{FormatLib.date(order.created_at)}
+            <div className="fab-tooltip">
+              <span className="trigger"><PlusCircle size={16} weight="light" /></span>
+              <div className="content">
+                {t('app.shared.store.order_item.last_update')}<br />
+                {FormatLib.date(order.updated_at)}
+              </div>
             </div>
-          </div>
+          </p>
         </div>
       </div>
       <div className='price'>
diff --git a/app/frontend/src/stylesheets/modules/store/order-item.scss b/app/frontend/src/stylesheets/modules/store/order-item.scss
index 85d63ca7c..ca571e3f6 100644
--- a/app/frontend/src/stylesheets/modules/store/order-item.scss
+++ b/app/frontend/src/stylesheets/modules/store/order-item.scss
@@ -1,8 +1,8 @@
 .order-item {
   width: 100%;
   display: grid;
-  grid-template-rows: repeat(2, min-content);
-  grid-template-columns: 2fr 1fr 10ch;
+  grid-template-rows: repeat(3, min-content);
+  grid-template-columns: 1fr 1fr;
   gap: 1.6rem 2.4rem;
   align-items: center;
   padding: 1.6rem;
@@ -52,7 +52,7 @@
     }
   }
   .price {
-    grid-area: 1 / 3 / 3 / 4;
+    grid-area: 3 / 1 / 4 / 2;
     display: flex;
     flex-direction: column;
     justify-self: flex-end;
@@ -62,7 +62,25 @@
     }
     p { @include text-base(600); }
   }
-  button { grid-area: 1 / 4 / 3 / 5; }
+  button {
+    grid-area: 3 / 2 / 4 / 3;
+    justify-self: flex-end;
+    width: 4rem;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  @media (min-width: 640px) {
+    grid-template-rows: repeat(2, min-content);
+    grid-template-columns: 2fr 1fr 10ch;
+    .ref { grid-area: 1 / 1 / 2 / 2; }
+    .fab-state-label { grid-area: 1 / 2 / 2 / 3; }
+    .client { grid-area: 2 / 1 / 3 / 2; }
+    .date { grid-area: 2 / 2 / 3 / 3; }
+    .price { grid-area: 1 / 3 / 3 / 4; }
+    button { grid-area: 1 / 4 / 3 / 5; }
+  }
 
   @media (min-width: 1440px) {
     grid-auto-flow: column;