From 0cfd050963f78c716b20e90e41ca0981a262b1dd Mon Sep 17 00:00:00 2001
From: survellow <59056368+survellow@users.noreply.github.com>
Date: Tue, 2 Apr 2024 16:16:27 +0200
Subject: [PATCH 1/2] 49 free rooms table buttons layout

---
 frontend/src/view/FreeRooms.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/view/FreeRooms.vue b/frontend/src/view/FreeRooms.vue
index a5ac1fa..2a09757 100644
--- a/frontend/src/view/FreeRooms.vue
+++ b/frontend/src/view/FreeRooms.vue
@@ -129,12 +129,12 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
             />
           </template>
           <template #body="slotProps">
-            <div class="flex justify-content-between flex-wrap">
-              <div class="align-self-center">{{ slotProps.data.room }}</div>
+            <div class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4">
+              <p class="text-lg flex-1 align-self-stretch">{{ slotProps.data.room }}</p>
               <Button
                 :label="$t('freeRooms.viewOccupancy')"
                 icon="pi pi-hourglass"
-                class="p-button-rounded p-button-outlined"
+                class="p-button-rounded p-button-outlined sm:align-self-center align-self-end"
                 @click="occupationRoute(slotProps.data.room)"
               />
             </div>

From 29c0255be4d8edc72b1192070ea4229a3089dbc6 Mon Sep 17 00:00:00 2001
From: survellow <59056368+survellow@users.noreply.github.com>
Date: Tue, 2 Apr 2024 16:24:14 +0200
Subject: [PATCH 2/2] 49 fixed some spacings

---
 frontend/src/view/FreeRooms.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/view/FreeRooms.vue b/frontend/src/view/FreeRooms.vue
index 2a09757..9ad7740 100644
--- a/frontend/src/view/FreeRooms.vue
+++ b/frontend/src/view/FreeRooms.vue
@@ -129,8 +129,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
             />
           </template>
           <template #body="slotProps">
-            <div class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4">
-              <p class="text-lg flex-1 align-self-stretch">{{ slotProps.data.room }}</p>
+            <div class="flex flex-column sm:flex-row justify-content-between flex-1 column-gap-4 mx-2 md:mx-4">
+              <p class="flex-1 align-self-stretch sm:align-self-center my-2">{{ slotProps.data.room }}</p>
               <Button
                 :label="$t('freeRooms.viewOccupancy')"
                 icon="pi pi-hourglass"