From 86229dfad8838403e4a279936a52458cc89c9a4e Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Thu, 30 Oct 2025 17:23:02 +0100
Subject: [PATCH] Try to improve UI for book cards...

---
 front/src/BookCard.vue     | 37 +++++++++++++++++++------------------
 front/src/BooksBrowser.vue |  2 +-
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/front/src/BookCard.vue b/front/src/BookCard.vue
index 763fab6..4fb922e 100644
--- a/front/src/BookCard.vue
+++ b/front/src/BookCard.vue
@@ -30,25 +30,26 @@ function openBook() {
         </figure>
       </div>
       <div class="media-content">
-        <div class="is-size-4">{{title}}</div>
-        <div class="is-size-5 is-italic">{{author}}</div>
-
-      <VRating
-          half-increments
-          readonly
-          :length="5"
-          size="medium"
-          :model-value="rating/2"
-          active-color="bulma-body-color"
-          />
-      </div>
-      <nav v-if="read" class="level">
-        <div class="level-left">
-          <span class="level-item icon" :title="$t('booklistelement.read')">
-            <b-icon-check-circle />
-          </span>
+        <div class="content">
+          <div class="is-size-5">{{title}}</div>
+          <div class="is-size-5 is-italic">{{author}}</div>
+          <VRating
+              half-increments
+              readonly
+              :length="5"
+              size="medium"
+              :model-value="rating/2"
+              active-color="bulma-body-color"
+              />
         </div>
-      </nav>
+        <nav v-if="read" class="level">
+          <div class="level-left">
+            <span class="level-item icon" :title="$t('booklistelement.read')">
+              <b-icon-check-circle />
+            </span>
+          </div>
+        </nav>
+      </div>
     </div>
   </div>
 </template>
diff --git a/front/src/BooksBrowser.vue b/front/src/BooksBrowser.vue
index 601dcb8..402739b 100644
--- a/front/src/BooksBrowser.vue
+++ b/front/src/BooksBrowser.vue
@@ -26,7 +26,7 @@ const { data, error } = getMyBooks();
 	padding-bottom: 100px;
   line-height: 2.5;
 
-  column-count: 4;
+  column-count: 2;
   column-gap: 15px;
 }