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

@@ -51,42 +51,51 @@ function BookingCard({ booking, onClick, isExpanded, onBookingUpdate, onBookingD
 		}
 	};
 
-	const bookingLengths = [
-		{ value: 1, label: "30 min" },
-		{ value: 2, label: "1 h" },
-		{ value: 3, label: "1.5 h" },
-		{ value: 4, label: "2 h" },
-		{ value: 5, label: "2.5 h" },
-		{ value: 6, label: "3 h" },
-		{ value: 7, label: "3.5 h" },
-		{ value: 8, label: "4 h" },
-	];
+	const bookingLengths = [];
+	for (let i = 1; i <= hoursAvailable; i++) {
+		const endTimeIndex = booking.startTime + i;
+		const endTime = getTimeFromIndex(endTimeIndex);
+		const durationLabel = i === 1 ? "30 min" : 
+			i === 2 ? "1 h" :
+			i === 3 ? "1.5 h" :
+			i === 4 ? "2 h" :
+			i === 5 ? "2.5 h" :
+			i === 6 ? "3 h" :
+			i === 7 ? "3.5 h" :
+			i === 8 ? "4 h" : `${i * 0.5} h`;
+		
+		bookingLengths.push({
+			value: endTimeIndex,
+			label: `${endTime} · ${durationLabel}`
+		});
+	}
 
-	const disabledOptions = {
-		1: !(hoursAvailable > 0),
-		2: !(hoursAvailable > 1),
-		3: !(hoursAvailable > 2),
-		4: !(hoursAvailable > 3),
-		5: !(hoursAvailable > 4),
-		6: !(hoursAvailable > 5),
-		7: !(hoursAvailable > 6),
-		8: !(hoursAvailable > 7),
-	};
+	// No disabled options needed since we only generate available options
+	const disabledOptions = {};
 
 	function handleLengthChange(event) {
-		const lengthValue = event.target.value === "" ? null : parseInt(event.target.value);
-		setSelectedLength(lengthValue);
+		const endTimeValue = event.target.value === "" ? null : parseInt(event.target.value);
+		setCalculatedEndTime(endTimeValue);
 		
-		if (lengthValue !== null) {
-			const newEndTime = booking.startTime + lengthValue;
-			setCalculatedEndTime(newEndTime);
+		if (endTimeValue !== null) {
+			const newLength = endTimeValue - booking.startTime;
+			setSelectedLength(newLength);
 		} else {
+			setSelectedLength(currentLength);
 			setCalculatedEndTime(booking.endTime);
 		}
 	}
 
+	// Check if any changes have been made
+	const hasChanges = () => {
+		const titleChanged = editedTitle !== booking.title;
+		const participantsChanged = JSON.stringify(editedParticipants) !== JSON.stringify(booking.participants || []);
+		const endTimeChanged = calculatedEndTime !== booking.endTime;
+		return titleChanged || participantsChanged || endTimeChanged;
+	};
+
 	function handleSave() {
-		if (selectedLength !== null && onBookingUpdate) {
+		if (hasChanges() && onBookingUpdate) {
 			const updatedBooking = {
 				...booking,
 				title: editedTitle,
@@ -278,14 +287,13 @@ function BookingCard({ booking, onClick, isExpanded, onBookingUpdate, onBookingD
 											options={bookingLengths}
 											disabledOptions={disabledOptions}
 											onChange={handleLengthChange}
-											value={selectedLength || ""}
-											placeholder={{ 
-												value: "", 
-												label: "Välj bokningslängd" 
-											}}
+											value={calculatedEndTime || booking.endTime}
+											placeholder={null}
 										/>
 									</div>
 									
+									<hr className={styles.divider} />
+									
 									{!showDeleteConfirm ? (
 										<div className={styles.buttonSection}>
 											<Button 
@@ -301,11 +309,11 @@ function BookingCard({ booking, onClick, isExpanded, onBookingUpdate, onBookingD
 												Avbryt
 											</Button>
 											<Button 
-												className={`${styles.saveButton} ${selectedLength === null ? styles.disabledButton : ''}`}
+												className={`${styles.saveButton} ${!hasChanges() ? styles.disabledButton : ''}`}
 												onPress={handleSave}
-												isDisabled={selectedLength === null}
+												isDisabled={!hasChanges()}
 											>
-												{selectedLength !== null ? 'Spara ändringar' : 'Välj längd först'}
+												Spara
 											</Button>
 										</div>
 									) : (

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

@@ -14,8 +14,8 @@
 @media (hover: hover) {
 	.cardWrapper:hover .card {
 		cursor: pointer;
-		border-color: var(--color-primary);
-		box-shadow: var(--shadow-xl);
+		border-color: var(--border-medium);
+		/*box-shadow: var(--shadow-xl);*/
 		/*transform: translateY(-2px);*/
 	}
 }
@@ -134,6 +134,13 @@
 	border-top: 1px solid #E5E5E5;
 }
 
+.divider {
+	border: none;
+	border-top: 1px solid var(--border-medium);
+	margin: 1rem 0;
+	margin-bottom: 1.5rem;
+}
+
 .formSection {
 	margin-bottom: 1.5rem;
 }