From fbafcf1b06047b80af98d3de8396403a13caf2e4 Mon Sep 17 00:00:00 2001
From: William Kuijltjes <w.kuijltjes@student.science.ru.nl>
Date: Sat, 25 Nov 2023 07:44:45 +0100
Subject: [PATCH] Reduce the width of buttons in the control column and
 recombine them into one row

---
 marietje/queues/templates/queues/queue.html | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index 4ac8b66..42ea478 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -106,18 +106,17 @@
                                 <td>
                                     <div class="d-flex flex-column">
                                         <div class="d-flex flex-row">
-                                            <button v-if="song.can_move_up" v-on:click="move_down(queue[index-1].id)" class="btn btn-link"><i
-                                            class="fa-solid fa-arrow-up"></i></button>
-                                            <button v-else class="btn btn-link invisible"><i class="fa-solid fa-arrow-up"></i></button>
+                                            <button v-if="song.can_move_up" v-on:click="move_down(queue[index-1].id)" 
+                                                    class="btn btn-link p-1 p-md-2"><i class="fa-solid fa-arrow-up"></i></button>
+                                            <button v-else class="btn btn-link invisible p-1 p-md-2"><i class="fa-solid fa-arrow-up"></i></button>
 
-                                            <button v-if="song.can_move_down" v-on:click="move_down(song.id)" class="btn btn-link"><i
-                                                    class="fa-solid fa-arrow-down"></i></button>
-                                            <button v-else class="btn btn-link invisible"><i class="fa-solid fa-arrow-down"></i></button>
-                                        </div>
-                                        <div class="d-flex flex-row">
-                                            <button v-if="song.can_delete" v-on:click="cancel_song(song.id)" class="btn btn-link"><i
-                                            class="fa-solid fa-trash-can"></i></button>
-                                            <button v-else class="btn btn-link invisible"><i class="fa-solid fa-trash-can"></i></button>
+                                            <button v-if="song.can_move_down" v-on:click="move_down(song.id)" 
+                                                    class="btn btn-link p-1 p-md-2"><i class="fa-solid fa-arrow-down"></i></button>
+                                            <button v-else class="btn btn-link invisible p-1 p-md-2"><i class="fa-solid fa-arrow-down"></i></button>
+
+                                            <button v-if="song.can_delete" v-on:click="cancel_song(song.id)" 
+                                                    class="btn btn-link p-1 p-md-2"><i class="fa-solid fa-trash-can"></i></button>
+                                            <button v-else class="btn btn-link invisible p-1 p-md-2"><i class="fa-solid fa-trash-can"></i></button>
                                         </div>
                                     </div>
                                 </td>