From ebf0196bef04949b7d2d32115fb677b495ac9795 Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Wed, 27 May 2026 18:20:53 +0200
Subject: [PATCH] improve counter basket item style

---
 core/static/core/accordion.scss               |  4 +++
 counter/static/counter/css/counter-click.scss | 23 ++++++++++++-
 counter/templates/counter/counter_click.jinja | 32 +++++++++++--------
 3 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/core/static/core/accordion.scss b/core/static/core/accordion.scss
index 28a7f75b..23bb2fa6 100644
--- a/core/static/core/accordion.scss
+++ b/core/static/core/accordion.scss
@@ -46,6 +46,10 @@ details.accordion>.accordion-content {
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
   overflow: hidden;
+
+  @media screen and (max-width: 600px) {
+    padding: .75em 1.5em;
+  }
 }
 
 @mixin animation($selector) {
diff --git a/counter/static/counter/css/counter-click.scss b/counter/static/counter/css/counter-click.scss
index 6288f902..00f882bf 100644
--- a/counter/static/counter/css/counter-click.scss
+++ b/counter/static/counter/css/counter-click.scss
@@ -42,7 +42,28 @@
   min-width: 350px;
 
   ul {
-    list-style-type: none;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    margin-left: 0;
+
+    .basket-row {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+
+      .product-name {
+        flex: 1 2 0;
+        min-width: 0;
+        text-wrap: wrap;
+      }
+    }
+  }
+
+  form {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
   }
 }
 
diff --git a/counter/templates/counter/counter_click.jinja b/counter/templates/counter/counter_click.jinja
index c92c8f9f..cca00cda 100644
--- a/counter/templates/counter/counter_click.jinja
+++ b/counter/templates/counter/counter_click.jinja
@@ -56,7 +56,7 @@
         <div class="accordion-content">
           {% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
 
-          <form method="post" action="" class="code_form" @submit.prevent="handleCode">
+          <form method="post" action="" @submit.prevent="handleCode">
 
             <counter-product-select
               name="code"
@@ -105,7 +105,9 @@
               {{ form.management_form }}
             </div>
             <ul>
-              <li x-show="getBasketSize() === 0">{% trans %}This basket is empty{% endtrans %}</li>
+              <li x-show="getBasketSize() === 0">
+                <em>{% trans %}This basket is empty{% endtrans %}</em>
+              </li>
               <template x-for="(item, index) in Object.values(basket)" :key="item.product.price.id">
                 <li>
                   <template x-for="error in item.errors">
@@ -113,19 +115,23 @@
                     </div>
                   </template>
 
-                  <button @click.prevent="addToBasket(item.product.price.id, -1)">-</button>
-                  <span class="quantity" x-text="item.quantity"></span>
-                  <button @click.prevent="addToBasket(item.product.price.id, 1)">+</button>
+                  <div class="basket-row">
+                    <div>
+                      <button @click.prevent="addToBasket(item.product.price.id, -1)">-</button>
+                      <span class="quantity" x-text="item.quantity"></span>
+                      <button @click.prevent="addToBasket(item.product.price.id, 1)">+</button>
+                    </div>
 
-                  <span x-text="item.product.name"></span> :
-                  <span x-text="item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })">€</span>
-                  <span x-show="item.getBonusQuantity() > 0"
-                        x-text="`${item.getBonusQuantity()} x P`"></span>
+                    <span class="product-name" x-text="item.product.name"></span>
+                    <span x-text="`${item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })} €`"></span>
+                    <span x-show="item.getBonusQuantity() > 0"
+                          x-text="`${item.getBonusQuantity()} x P`"></span>
 
-                  <button
-                    class="remove-item"
-                    @click.prevent="removeFromBasket(item.product.price.id)"
-                  ><i class="fa fa-trash-can delete-action"></i></button>
+                    <button
+                      class="remove-item"
+                      @click.prevent="removeFromBasket(item.product.price.id)"
+                    ><i class="fa fa-trash-can delete-action"></i></button>
+                  </div>
 
                   <input
                     type="hidden"