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

@@ -24,6 +24,7 @@ export function BookingModal({
 	const initialEndTimeIndex = booking.selectedBookingLength > 0 ? startTimeIndex + booking.selectedBookingLength : 
 		(hoursAvailable === 1 ? startTimeIndex + 1 : null); // Auto-select 30 min if that's all that's available
 	const [selectedEndTimeIndex, setSelectedEndTimeIndex] = useState(null);
+	const [currentStep, setCurrentStep] = useState(1);
 	const hasInitialized = useRef(false);
 	
 	// Store the original hours available to prevent it from changing when selections are made
@@ -97,6 +98,18 @@ export function BookingModal({
 		const durationSlots = endIndex - startTimeIndex;
 		return durationSlots * 0.5; // Each slot is 30 minutes
 	};
+
+	const handleNextStep = () => {
+		if (currentStep === 1 && hasSelectedEndTime) {
+			setCurrentStep(2);
+		}
+	};
+
+	const handleBackStep = () => {
+		if (currentStep === 2) {
+			setCurrentStep(1);
+		}
+	};
 	
 
 	return (
@@ -105,49 +118,73 @@ export function BookingModal({
 			isDismissable 
 			onOpenChange={(open) => !open && onClose && onClose()} 
 			className={className} 
-			style={{borderRadius: '0.4rem', overflow: 'hidden'}}
+			style={{borderRadius: '0.4rem', overflow: 'visible'}}
 		>
-			<Dialog style={{overflow: 'hidden'}}>
+			<Dialog style={{overflow: 'visible'}}>
 				<form>
-					<Heading slot="title">Ny bokning</Heading>
-					<p>{convertDateObjectToString(booking.selectedDate)}</p>
-					<BookingTitleField />
-					<div className={styles.timeDisplay}>
-						<div className={styles.timeRange}>
-							<div className={styles.startTimeSection}>
-								<label>Starttid</label>
-								<div className={styles.startTimeValue}>{getTimeFromIndex(startTimeIndex)}</div>
+					{currentStep === 1 ? (
+						<>
+							<Heading slot="title">Välj sluttid</Heading>
+							<p>{convertDateObjectToString(booking.selectedDate)}</p>
+							<div className={styles.timeDisplay}>
+								<div className={styles.timeRange}>
+									<div className={styles.startTimeSection}>
+										<label>Starttid</label>
+										<div className={styles.startTimeValue}>{getTimeFromIndex(startTimeIndex)}</div>
+									</div>
+									<div className={styles.endTimeSection}>
+										<label>Sluttid</label>
+										<Dropdown
+											options={endTimeOptions}
+											disabledOptions={disabledOptions}
+											onChange={handleChange}
+											value={selectedEndTimeIndex || ""}
+											placeholder={!initialEndTimeIndex ? { 
+												value: "", 
+												label: "Välj sluttid" 
+											} : null}
+											className={styles.endTimeDropdown}
+										/>
+									</div>
+								</div>
 							</div>
-							<div className={styles.endTimeSection}>
-								<label>Sluttid</label>
-								<Dropdown
-									options={endTimeOptions}
-									disabledOptions={disabledOptions}
-									onChange={handleChange}
-									value={selectedEndTimeIndex || ""}
-									placeholder={!initialEndTimeIndex ? { 
-										value: "", 
-										label: "Välj sluttid" 
-									} : null}
-									className={styles.endTimeDropdown}
-								/>
-							</div>
-						</div>
-					</div>
-										<ParticipantsSelector />
 
-					<div className={styles.modalFooter}>
-						<Button className={styles.cancelButton} slot="close">
-							Avbryt
-						</Button>
-						<Button 
-							className={`${styles.saveButton} ${!hasSelectedEndTime ? styles.disabledButton : ''}`}
-							onClick={hasSelectedEndTime ? booking.handleSave : undefined}
-							isDisabled={!hasSelectedEndTime}
-						>
-							{hasSelectedEndTime ? 'Boka' : 'Välj sluttid först'}
-						</Button>
-					</div>
+							<div className={styles.modalFooter}>
+								<Button className={styles.cancelButton} slot="close">
+									Avbryt
+								</Button>
+								<Button 
+									className={`${styles.saveButton} ${!hasSelectedEndTime ? styles.disabledButton : ''}`}
+									onClick={hasSelectedEndTime ? handleNextStep : undefined}
+									isDisabled={!hasSelectedEndTime}
+								>
+									{hasSelectedEndTime ? 'Nästa' : 'Välj sluttid först'}
+								</Button>
+							</div>
+						</>
+					) : (
+						<>
+							<Heading slot="title">Bokningsuppgifter</Heading>
+							<p>{convertDateObjectToString(booking.selectedDate)} · {getTimeFromIndex(startTimeIndex)} - {getTimeFromIndex(selectedEndTimeIndex)}</p>
+							<BookingTitleField />
+							<ParticipantsSelector />
+
+							<div className={styles.modalFooter}>
+								<Button 
+									className={styles.cancelButton}
+									onClick={handleBackStep}
+								>
+									Tillbaka
+								</Button>
+								<Button 
+									className={styles.saveButton}
+									onClick={booking.handleSave}
+								>
+									Boka
+								</Button>
+							</div>
+						</>
+					)}
 				</form>
 			</Dialog>
 		</Modal>

my-app/src/components/forms/ParticipantsSelector.module.css

@@ -122,7 +122,7 @@
 	border: 1px solid var(--dropdown-border);
 	border-radius: 0.5rem;
 	box-shadow: var(--dropdown-shadow);
-	z-index: 1000;
+	z-index: 1200;
 	max-height: 300px;
 	overflow-y: auto;
 	margin-top: 0rem;