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

@@ -178,11 +178,16 @@ function BookingCard({ booking, onClick, isExpanded, onBookingUpdate, onBookingD
 	return (
 		<div className={`${styles.card} ${isExpanded ? styles.expanded : ''}`}>
 			<div className={styles.header} onClick={!isExpanded ? onClick : undefined}>
-				<div className={styles.leftSection}>
+				<div className={styles.topSection}>
 					<div className={styles.titleRow}>
 						<h3 className={styles.title}>{booking.title}</h3>
 					</div>
-					
+					<div className={styles.time}>
+						{getTimeFromIndex(booking.startTime)} – {getTimeFromIndex(calculatedEndTime || booking.endTime)}
+					</div>
+	
+				</div>
+				<div className={styles.bottomSection}>
 					{isParticipantBooking && booking.createdBy && (
 						<div className={styles.createdBy}>
 							Tillagd av {booking.createdBy.name}
@@ -192,11 +197,6 @@ function BookingCard({ booking, onClick, isExpanded, onBookingUpdate, onBookingD
 					{!isParticipantBooking && booking.participants && booking.participants.length > 0 && (
 						<div className={styles.participants}>{formatParticipants(booking.participants)}</div>
 					)}
-				</div>
-				<div className={styles.rightSection}>
-					<div className={styles.time}>
-						{getTimeFromIndex(booking.startTime)} – {getTimeFromIndex(calculatedEndTime || booking.endTime)}
-					</div>
 					<div className={styles.roomBadge}>
 						{booking.room}
 					</div>

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

@@ -1,11 +1,9 @@
 .card {
 	border: var(--border-width-thin) solid var(--border-light);
-	padding: 1rem;
+	padding: 0.8rem 1rem;
 	width: 100%;
-	border-radius: var(--border-radius-md);
 	background: var(--bg-primary);
 	transition: var(--transition-medium);
-	/*box-shadow: var(--shadow-lg);*/
 }
 
 @media (hover: hover) {
@@ -20,25 +18,26 @@
 
 .header {
 	display: flex;
-	justify-content: space-between;
-	align-items: flex-start;
-	gap: 1rem;
+	flex-direction: column;
+	gap: 0.2rem;
 	width: 100%;
 }
 
-.leftSection {
-	flex: 1;
+.topSection {
 	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	height: 100%;
+	flex-direction: row;
+	justify-content: space-between;	
+	align-items: flex-end;
+	/*background-color: lightblue;*/
 }
 
-.rightSection {
+.bottomSection {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	justify-content: space-between;
 	align-items: flex-end;
-	align-items: end
+	width: 100%;
+	/*background-color: lightgreen;*/
 }
 
 .createdByIndicator {
@@ -68,11 +67,18 @@
 	color: #6b7280;
 }
 
+.participants {
+	margin: 0;
+	font-size: 1rem;
+	color: #6b7280;
+	padding: 0.25rem 0;
+}
+
 .roomBadge {
-	background-color: #065f46;
+	background-color: var(--su-blue);
 	color: white;
 	padding: 0.25rem 0.75rem;
-	border-radius: 10rem;
+	/*border-radius: 10rem;*/
 	font-size: 1rem;
 	font-weight: 500;
 	white-space: nowrap;
@@ -92,32 +98,8 @@
 	gap: var(--spacing-lg);
 }
 
-.timeSection {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	gap: 0.2rem;
-}
-
-.startTime {
-	font-size: 1.6rem;
-	font-weight: var(--font-weight-normal);
+.time {
 	color: var(--text-primary);
-	line-height: 1;
-}
-
-.endTime {
-	font-size: 1.6rem;
-	font-weight: var(--font-weight-normal);
-	color: var(--text-tertiary);
-	line-height: 1;
-}
-
-.participants {
-	margin: 0;
-	font-size: 1rem;
-	color: #6b7280;
 }
 
 /* Expanded card styles */