From e05c36b647e5cee3cd776f3c516bbce9d22154ac Mon Sep 17 00:00:00 2001
From: Dennis Heinrich <der@dennis-heinri.ch>
Date: Mon, 7 Apr 2025 15:30:09 +0200
Subject: [PATCH] =?UTF-8?q?Design=20f=C3=BCr=20mehrere=20Artikel=20angepas?=
 =?UTF-8?q?st?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/style/stylesheet.css | 17 ++++++++++++-----
 index.html                  |  9 +++++----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/assets/style/stylesheet.css b/assets/style/stylesheet.css
index 8db66ae..2f9bb26 100644
--- a/assets/style/stylesheet.css
+++ b/assets/style/stylesheet.css
@@ -21,19 +21,26 @@
     margin-left: 1em;
     font-weight: bold;
 }
+
 [data-template] {
     display: none !important;
 }
+
 .cart-items, .product-list, .alert, .navbar-brand, .settings-product-list {
     user-select: none;
     -webkit-user-select: none;
     -webkit-user-drag: none;
 }
-img {
-    user-select: none;
-    -webkit-user-select: none;
-    -webkit-user-drag: none;
-}
 .product-box, .cart-items, .settings-product-list {
     cursor: pointer;
+}
+
+.product-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 4fr));
+    gap: .4em;
+}
+
+.product-box .card-body span {
+    word-wrap: break-word;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index dce857e..20daf74 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,7 @@
 
     <main class="container-fluid flex-grow-1">
         <div data-tab="products" class="row">
-            <div class="col-12 col-md-4 products">
+            <div class="col-12 col-md-4">
                 <li class="list-group-item d-flex justify-content-between" data-template="product-line-item">
                         <span class="line-item-details">
                             <span class="amount quantity-value" data-attr="quantity">5</span>
@@ -43,18 +43,19 @@
                 </button>
             </div>
             <div class="col-12 col-md-8">
-                <div class="row row-cols-2 row-cols-md-5 row-gap-3 product-list h-100 overflow-auto">
+                <div class="product-list">
                     <div class="col product-box" data-template="product" data-id="0">
                         <div class="card">
-                            <img data-attr="image" src="https://placehold.co/250x250" alt="Produktbild" class="card-img-top" loading="eager">
+                            <img data-attr="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+BCQAHBQICJmhD1AAAAABJRU5ErkJggg==" alt="Produktbild" class="card-img-top" loading="eager">
                             <div class="card-body">
-                                <span data-attr="name">Wasser mit Kohlensäure</span>
+                                <small data-attr="name">Wasser mit Kohlensäure</small>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+
         <div data-tab="settings" class="row d-none">
             <div class="col-12 col-md-6">
                 <form class="card mb-2" method="dialog" id="new-product">