my-app/src/components/booking/InlineModalBookingForm.module.css

@@ -109,11 +109,18 @@
 .formActions {
 	display: flex;
 	gap: var(--spacing-lg);
+	height: fit-content;
 	/*margin-top: var(--spacing-3xl);*/
 	/*padding-top: var(--spacing-2xl);*/
 	/*border-top: 1px solid var(--border-light);*/
 }
 
+.confirmationActions {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-md);
+}
+
 .cancelButton {
 	flex: 1;
 	background-color: var(--modal-cancel-bg);

my-app/src/components/booking/InlineModalExtendedBookingForm.jsx

@@ -48,6 +48,7 @@ export function InlineModalExtendedBookingForm({
 	const [selectedEndTimeIndex, setSelectedEndTimeIndex] = useState(null);
 	const [showConfirmation, setShowConfirmation] = useState(false);
 	const hasInitialized = useRef(false);
+	const confirmationRef = useRef(null);
 	
 	// Store the original hours available to prevent it from changing when selections are made
 	const originalHoursAvailable = useRef(hoursAvailable);
@@ -67,6 +68,20 @@ export function InlineModalExtendedBookingForm({
 		console.log("Booking:", booking);
 	}, [initialEndTimeIndex, setEndTimeIndex, booking]);
 
+	// Effect to scroll to confirmation when it's shown
+	useEffect(() => {
+		if (showConfirmation && confirmationRef.current) {
+			// Small delay to ensure the DOM has updated
+			setTimeout(() => {
+				confirmationRef.current.scrollIntoView({
+					behavior: 'smooth',
+					block: 'center',
+					inline: 'center'
+				});
+			}, 100);
+		}
+	}, [showConfirmation]);
+
 	// Generate end time options based on available hours
 	const endTimeOptions = [];
 	const disabledOptions = {};
@@ -159,7 +174,10 @@ export function InlineModalExtendedBookingForm({
 	// Show confirmation page if user pressed save
 	if (showConfirmation) {
 		return (
-			<div className={`${styles.inlineForm} ${arrowPointsLeft ? styles.arrowLeft : styles.arrowRight}`}>
+			<div 
+				ref={confirmationRef}
+				className={`${styles.inlineForm} ${arrowPointsLeft ? styles.arrowLeft : styles.arrowRight}`}
+			>
 				<div className={styles.formHeader}>
 					<div style={{ textAlign: 'center', padding: '1rem' }}>
 						<h3 style={{ margin: '0 0 0.5rem 0', color: '#28a745' }}>Bokning sparad!</h3>
@@ -201,8 +219,41 @@ export function InlineModalExtendedBookingForm({
 
 				<hr className={extendedStyles.divider} />
 
-				<div className={styles.formActions}>
-					<Button className={styles.saveButton} onPress={onClose}>
+				<div className={styles.confirmationActions}>
+					<Button 
+						className={styles.saveButton} 
+						onPress={() => {
+							navigate('/');
+							// Scroll to bookings after navigation
+							setTimeout(() => {
+								const bookingsElement = document.getElementById('bookings');
+								if (bookingsElement) {
+									bookingsElement.scrollIntoView({
+										behavior: 'smooth',
+										block: 'start'
+									});
+								}
+							}, 100);
+						}}
+						style={{ 
+							height: '2.75rem', 
+							minHeight: '2.75rem', 
+							flex: 'none', 
+							width: '100%' 
+						}}
+					>
+						Se bokningar
+					</Button>
+					<Button 
+						className={styles.cancelButton} 
+						onPress={onClose}
+						style={{ 
+							height: '2.75rem', 
+							minHeight: '2.75rem', 
+							flex: 'none', 
+							width: '100%' 
+						}}
+					>
 						Stäng
 					</Button>
 				</div>

my-app/src/components/booking/InlineModalExtendedBookingForm.module.css

@@ -28,4 +28,19 @@
 .divider {
 	margin: 1.5rem 0;
 	border: 0.6px solid var(--border-light);	
+}
+
+.confirmationActions {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	width: 100%;
+}
+
+.confirmationActions .saveButton,
+.confirmationActions .cancelButton {
+	height: 2.75rem !important;
+	min-height: 2.75rem !important;
+	flex: none !important;
+	width: 100% !important;
 }

my-app/src/pages/RoomBooking.jsx

@@ -45,23 +45,24 @@ export function RoomBooking({ bookings, showSuccessBanner, lastCreatedBooking, o
 			</div>
 			<hr className={styles.sectionDivider} />
 
-			<h2 className={styles.sectionHeading}>Mina bokingar</h2>
-			<BookingsList 
-				bookings={bookings} 
-				handleEditBooking={handleEditBooking}
-				onBookingUpdate={onBookingUpdate}
-				onBookingDelete={onBookingDelete}
-				showSuccessBanner={showSuccessBanner}
-				lastCreatedBooking={lastCreatedBooking}
-				onDismissBanner={onDismissBanner}
-				showDeleteBanner={showDeleteBanner}
-				lastDeletedBooking={lastDeletedBooking}
-				onDismissDeleteBanner={onDismissDeleteBanner}
-				showDevelopmentBanner={settings.showDevelopmentBanner}
-				showBookingConfirmationBanner={settings.showBookingConfirmationBanner}
-				showBookingDeleteBanner={settings.showBookingDeleteBanner}
-			/>
-			<hr className={styles.sectionDivider} />
+			<section id="bookings">
+				<h2 className={styles.sectionHeading}>Mina bokingar</h2>
+				<BookingsList 
+					bookings={bookings} 
+					handleEditBooking={handleEditBooking}
+					onBookingUpdate={onBookingUpdate}
+					onBookingDelete={onBookingDelete}
+					showSuccessBanner={showSuccessBanner}
+					lastCreatedBooking={lastCreatedBooking}
+					onDismissBanner={onDismissBanner}
+					showDeleteBanner={showDeleteBanner}
+					lastDeletedBooking={lastDeletedBooking}
+					onDismissDeleteBanner={onDismissDeleteBanner}
+					showDevelopmentBanner={settings.showDevelopmentBanner}
+					showBookingConfirmationBanner={settings.showBookingConfirmationBanner}
+					showBookingDeleteBanner={settings.showBookingDeleteBanner}
+				/>
+			</section>
 		</div>
 	);
 }