From 7547c9eabd0120245f7eefc17e0895922a4f9ce6 Mon Sep 17 00:00:00 2001
From: Fabricius Seifert <fabricius.seifert@neuland-bfi.de>
Date: Thu, 2 May 2024 10:40:36 +0200
Subject: [PATCH] price alignment small

---
 src/checkout/components/LineItem.css |  7 ++++
 src/checkout/components/LineItem.js  | 51 +++++++++++++++-------------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/checkout/components/LineItem.css b/src/checkout/components/LineItem.css
index 82cecc4..570c125 100644
--- a/src/checkout/components/LineItem.css
+++ b/src/checkout/components/LineItem.css
@@ -25,6 +25,7 @@
   gap: 1rem;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
 }
 
 .c_LineItem__name {
@@ -35,6 +36,12 @@
   min-width: 300px;
 }
 
+.c_LineItem__quantity {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
 .c_LineItem__price {
   flex-basis: 100px;
   text-align: end;
diff --git a/src/checkout/components/LineItem.js b/src/checkout/components/LineItem.js
index 2f419c8..258803d 100644
--- a/src/checkout/components/LineItem.js
+++ b/src/checkout/components/LineItem.js
@@ -23,31 +23,34 @@ export default ({ sku, id, name, quantity, total, image }) => {
       <a href="${url}" class="c_LineItem__name">
         <strong>${name}</strong><br />${sku}
       </a>
-      <div class="c_LineItem__quantity">${quantity}</div>
 
-      <form action="/checkout/cart/remove" method="post">
-        <input type="hidden" name="sku" value="${sku}" />
-        ${Button({
-          variant: "secondary",
-          rounded: true,
-          type: "submit",
-          value: "remove",
-          size: "small",
-          title: `Remove ${name} from cart`,
-          children: html`<svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            height="20"
-            width="20"
-            viewBox="0 0 48 48"
-          >
-            <path
-              fill="#000"
-              d="m40 5.172-16 16-16-16L5.171 8l16.001 16L5.171 40 8 42.828l16-16 16 16L42.828 40l-16-16 16-16L40 5.172Z"
-            />
-          </svg>`,
-        })}
-      </form>
+      <div class="c_LineItem__quantity">
+        <span>${quantity}</span>
+
+        <form action="/checkout/cart/remove" method="post">
+          <input type="hidden" name="sku" value="${sku}" />
+          ${Button({
+            variant: "secondary",
+            rounded: true,
+            type: "submit",
+            value: "remove",
+            size: "small",
+            title: `Remove ${name} from cart`,
+            children: html`<svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              height="20"
+              width="20"
+              viewBox="0 0 48 48"
+            >
+              <path
+                fill="#000"
+                d="m40 5.172-16 16-16-16L5.171 8l16.001 16L5.171 40 8 42.828l16-16 16 16L42.828 40l-16-16 16-16L40 5.172Z"
+              />
+            </svg>`,
+          })}
+        </form>
+      </div>
       <div class="c_LineItem__price">${total} Ø</div>
     </div>
   </li>`;