From b48c42c40c9a95fb8e6595ce02490c7ea5c5a9eb Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Sat, 25 Apr 2026 15:13:22 +0200
Subject: [PATCH] Collection form: adapt close button to mobile

---
 front/src/CollectionFormElement.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/front/src/CollectionFormElement.vue b/front/src/CollectionFormElement.vue
index 808f064..e990986 100644
--- a/front/src/CollectionFormElement.vue
+++ b/front/src/CollectionFormElement.vue
@@ -81,6 +81,11 @@ function onPointerMove(e) {
     >
       <BookListElement v-bind="props.book">
         <template v-slot:left>
+          <div class="is-hidden-desktop align-right">
+            <div @click="$emit('delete')" class="centered closebtn clickable">
+              <b-icon-x />
+            </div>
+          </div>
           <div class="inputpositionwidget centered">
             <div
               v-if="!isInputtingPosition"
@@ -109,7 +114,7 @@ function onPointerMove(e) {
           <div class="positionwidget centered is-narrow" @pointerdown="onPointerDown">
             <b-icon-list />
           </div>
-          <div @click="$emit('delete')" class="centered closebtn clickable">
+          <div @click="$emit('delete')" class="is-hidden-touch centered closebtn clickable">
             <b-icon-x />
           </div>
         </template>
@@ -175,13 +180,15 @@ function onPointerMove(e) {
   height: 40px;
   width: 40px;
   font-size: 36px;
+
+}
+
+.align-right {
+  display: flex;
+  justify-content: flex-end;
 }
 
 @media (max-width: 1024px) {
-  .inputpositionwidget {
-    margin-top: 10px;
-  }
-
   .positionwidget {
     margin-bottom: 10px;
   }