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

@@ -2,7 +2,7 @@
 	width: 100%;
 	transition: var(--transition-medium);
 	/*max-width: 400px;*/
-	flex: 1;
+	/*flex: 1;*/
 }
 
 .card {
@@ -10,11 +10,11 @@
 	padding: 0.8rem 1rem;
 	width: 100%;
 	background: var(--bg-primary);
-	transition: var(--transition-medium);
+	/*transition: var(--transition-medium);*/
 }
 
 @media (hover: hover) {
-	.cardWrapper:hover .card {
+	.cardWrapper:hover:not(.expanded) .card {
 		cursor: pointer;
 		border-color: var(--border-medium);
 		/*box-shadow: var(--shadow-xl);*/
@@ -122,6 +122,12 @@
 	box-shadow: var(--shadow-xl);
 }
 
+.expanded .card {
+	outline: 2px solid #3b82f6;
+	outline-offset: -1px;
+	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+}
+
 .expanded:hover {
 	transform: none;
 }

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

@@ -22,9 +22,15 @@ function BookingsList({ bookings, handleEditBooking, onBookingUpdate, onBookingD
 			groups[dateKey] = [];
 		}
 		groups[dateKey].push(booking);
+		console.log("HEY:");
+		console.log(groups);
 		return groups;
 	}, {});
 
+	const groupedBookingsArray = Object.values(groupedBookings);
+	console.log("GROUPED BOOKINGS ARRAY:");
+	console.log(groupedBookingsArray);
+
 	function handleBookingClick(booking) {
 		setExpandedBookingId(expandedBookingId === booking.id ? null : booking.id);
 	}

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

@@ -73,6 +73,9 @@
 	flex: 1;
 	min-width: 250px;
 	max-width: 500px;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
 }
 
 .dateGroup:last-child {