From cd241b0b1e2e83d0f7a56c5807a019f2c445988e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabien=20Cl=C3=A9mens?= <pro@clemens.fr>
Date: Tue, 21 Jul 2026 10:37:00 +0200
Subject: [PATCH] fix(appointments): fix mobile layout overflow hiding booking
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fabien Clémens <pro@clemens.fr>
---
 .../Appointments/AppointmentDetails.vue       | 18 +++++++
 src/views/Appointments/Booking.vue            | 51 +++++++++++++++++--
 2 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/src/components/Appointments/AppointmentDetails.vue b/src/components/Appointments/AppointmentDetails.vue
index 983bc755c9..9639fc6c89 100644
--- a/src/components/Appointments/AppointmentDetails.vue
+++ b/src/components/Appointments/AppointmentDetails.vue
@@ -231,6 +231,12 @@ h3 {
 	max-width: 720px;
 	max-height: 500px;
 	overflow: auto;
+
+	@media (max-width: 768px) {
+		width: 100%;
+		max-height: none;
+		overflow: visible;
+	}
 }
 
 .booking-appointment-wrapper {
@@ -239,20 +245,32 @@ h3 {
 	flex-wrap: wrap;
 	gap: calc(var(--default-grid-baseline) * 6);
 	width: 100%;
+
+	@media (max-width: 768px) {
+		flex-direction: column;
+		gap: calc(var(--default-grid-baseline) * 4);
+	}
 }
 
 .booking-details {
 	flex: 1 220px;
+	min-width: 0;
 }
 
 .appointment-details {
 	max-width: 360px;
 	flex: 1 auto;
 	padding-inline-start: 30px;
+	min-width: 0;
 
 	input {
 		width: 100%;
 	}
+
+	@media (max-width: 768px) {
+		max-width: 100%;
+		padding-inline-start: 0;
+	}
 }
 
 .buttons .loading-icon {
diff --git a/src/views/Appointments/Booking.vue b/src/views/Appointments/Booking.vue
index 784bb4baa9..254e9e5023 100644
--- a/src/views/Appointments/Booking.vue
+++ b/src/views/Appointments/Booking.vue
@@ -260,9 +260,17 @@ export default {
 #appointment-booking {
 	display: flex;
 	justify-content: center;
-	align-items: center;
+	// center would push .booking__container off-screen (negative offset) once it's taller than this box
+	align-items: flex-start;
 	width: 100%;
-	height: 100%;
+	min-height: 100%;
+}
+
+@media (max-width: 768px) {
+	// Hidden instead of reserved-for: overlaps booking content otherwise
+	footer {
+		display: none;
+	}
 }
 </style>
 
@@ -270,10 +278,17 @@ export default {
 .booking__container {
 	display: flex;
 	width: 100%;
-	height: 100vh;
+	min-height: calc(100vh - var(--header-height, 50px) - var(--footer-height, 65px));
+	min-height: calc(100dvh - var(--header-height, 50px) - var(--footer-height, 65px));
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
+
+	@media (max-width: 768px) {
+		// Footer is hidden on mobile (see unscoped style block), so no need to reserve space for it
+		min-height: calc(100vh - var(--header-height, 50px));
+		min-height: calc(100dvh - var(--header-height, 50px));
+	}
 }
 
 .booking {
@@ -285,17 +300,41 @@ export default {
 	padding-top: calc(var(--default-grid-baseline) * 4);
 	padding-bottom: calc(var(--default-grid-baseline) * 4);
 	padding-inline: calc(var(--default-grid-baseline) * 4);
-	margin-bottom: var(--footer-height);
+
+	@media (max-width: 768px) {
+		flex-direction: column;
+		padding-inline: calc(var(--default-grid-baseline) * 2);
+	}
 }
 
 .booking__description {
 	white-space: break-spaces;
 }
 
+.booking__config-user-info,
+.booking__date-selection,
+.booking__slot-selection {
+	min-width: 0;
+}
+
 .booking__date-selection {
 	display: flex;
 	flex-direction: column;
 	gap: calc(var(--default-grid-baseline) * 2);
+
+	@media (max-width: 768px) {
+		overflow-x: auto;
+	}
+}
+
+.booking__time-zone {
+	@media (max-width: 768px) {
+		width: 100%;
+
+		:deep(.v-select) {
+			width: 100%;
+		}
+	}
 }
 
 .booking__slots {
@@ -307,6 +346,10 @@ export default {
 
 .booking__slot-selection {
 	min-width: 180px;
+
+	@media (max-width: 768px) {
+		min-width: 0;
+	}
 }
 
 :deep(.mx-input-wrapper) {