From 7b5da2df6182f4d76c203353b35d850ff1c99f2b Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Fri, 27 Mar 2026 14:16:59 +0100
Subject: [PATCH] Improve book list buttons in mobile view

---
 front/src/BookListElement.vue | 50 ++++++++++++++++++++++-------------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/front/src/BookListElement.vue b/front/src/BookListElement.vue
index 41e24a0..729ea20 100644
--- a/front/src/BookListElement.vue
+++ b/front/src/BookListElement.vue
@@ -143,24 +143,26 @@ async function importInventaireEdition(inventaireid) {
       </div>
     </div>
     <div v-if="id && id != 0" class="column is-narrow">
-      <button @click="onUserBookWantRead" class="button is-large verticalbutton">
-        <span class="icon" :title="$t('booklistelement.wantread')">
-          <b-icon-eye-fill v-if="isWantRead" />
-          <b-icon-eye v-else />
-        </span>
-      </button>
-      <button @click="onUserBookStartRead" class="button is-large verticalbutton">
-        <span class="icon" :title="$t('booklistelement.startread')">
-          <b-icon-book-fill v-if="isStartRead" />
-          <b-icon-book v-else />
-        </span>
-      </button>
-      <button @click="onUserBookRead" class="button is-large verticalbutton">
-        <span class="icon" :title="$t('booklistelement.read')">
-          <b-icon-check-circle-fill v-if="isRead" />
-          <b-icon-check-circle v-else />
-        </span>
-      </button>
+      <div class="buttons">
+        <button @click="onUserBookWantRead" class="button is-large verticalbutton">
+          <span class="icon" :title="$t('booklistelement.wantread')">
+            <b-icon-eye-fill v-if="isWantRead" />
+            <b-icon-eye v-else />
+          </span>
+        </button>
+        <button @click="onUserBookStartRead" class="button is-large verticalbutton">
+          <span class="icon" :title="$t('booklistelement.startread')">
+            <b-icon-book-fill v-if="isStartRead" />
+            <b-icon-book v-else />
+          </span>
+        </button>
+        <button @click="onUserBookRead" class="button is-large verticalbutton">
+          <span class="icon" :title="$t('booklistelement.read')">
+            <b-icon-check-circle-fill v-if="isRead" />
+            <b-icon-check-circle v-else />
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -183,6 +185,10 @@ img {
   transition: ease-in-out 0.02s;
 }
 
+.buttons {
+  display: block;
+}
+
 .verticalbutton {
   display: block;
 }
@@ -194,4 +200,12 @@ img {
 .no-margin {
   margin: 0px;
 }
+
+@media (max-width: 1024px) {
+  .buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
 </style>