my-app/src/components/InlineBookingForm.jsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Button } from 'react-aria-components';
 import { convertDateObjectToString, getTimeFromIndex } from '../helpers';
 import Dropdown from './Dropdown';
+import { BookingTitleField } from './BookingTitleField';
+import { ParticipantsSelector } from './ParticipantsSelector';
 import { useBookingContext } from '../context/BookingContext';
 import { useSettingsContext } from '../context/SettingsContext';
 import styles from './InlineBookingForm.module.css';
@@ -78,57 +80,63 @@ export function InlineBookingForm({
 
 	return (
 		<div className={`${styles.inlineForm} ${arrowPointsLeft ? styles.arrowLeft : styles.arrowRight}`}>
+			{/* Date Context */}
 			<div className={styles.formHeader}>
-				<h3>{booking.title == "" ? "Jacobs bokning" : booking.title}</h3>
 				<p className={styles.dateText}>{convertDateObjectToString(booking.selectedDate)}</p>
 			</div>
 
-			<div className={styles.timeDisplay}>
-				<div className={styles.timeRange}>
-					<div className={styles.timeItem}>
-						<label>Starttid</label>
-						<span className={styles.timeValue}>{getTimeFromIndex(startTimeIndex)}</span>
-					</div>
-					<div className={styles.timeSeparator}>–</div>
-					<div className={styles.timeItem}>
-						<label>Sluttid</label>
-						<span className={`${styles.timeValue} ${!hasSelectedLength ? styles.placeholder : ''}`}>
-							{hasSelectedLength ? getTimeFromIndex(displayEndTime) : "Välj längd"}
-						</span>
+			{/* Title - What */}
+			<div className={styles.section}>
+				<BookingTitleField compact={true} />
+			</div>
+
+			{/* Time Selection - When */}
+			<div className={styles.section}>
+				<div className={styles.timeDisplay}>
+					<div className={styles.timeRange}>
+						<div className={styles.timeItem}>
+							<label>Starttid</label>
+							<span className={styles.timeValue}>{getTimeFromIndex(startTimeIndex)}</span>
+						</div>
+						<div className={styles.timeSeparator}>–</div>
+						<div className={styles.timeItem}>
+							<label>Sluttid</label>
+							<span className={`${styles.timeValue} ${!hasSelectedLength ? styles.placeholder : ''}`}>
+								{hasSelectedLength ? getTimeFromIndex(displayEndTime) : "Välj längd"}
+							</span>
+						</div>
 					</div>
 				</div>
+
+				<div className={styles.formField}>
+					<label>Längd</label>
+					<Dropdown
+						options={bookingLengths}
+						disabledOptions={disabledOptions}
+						onChange={handleChange}
+						value={selectedLength || ""}
+						placeholder={!initialLength ? { 
+							value: "", 
+							label: "Välj bokningslängd" 
+						} : null}
+					/>
+				</div>
 			</div>
 
-			<div className={styles.formField}>
-				<label>Längd</label>
-				<Dropdown
-					options={bookingLengths}
-					disabledOptions={disabledOptions}
-					onChange={handleChange}
-					value={selectedLength || ""}
-					placeholder={!initialLength ? { 
-						value: "", 
-						label: "Välj bokningslängd" 
-					} : null}
-				/>
+			{/* Participants - Who */}
+			<div className={styles.section}>
+				<ParticipantsSelector compact={true} />
 			</div>
 
-			<div className={styles.sectionWithTitle}>
-				<label>{booking.selectedRoom !== "allRooms" ? "Rum" : "Tilldelat rum"}</label>
-				<p>{booking.selectedRoom !== "allRooms" ? booking.selectedRoom : (booking.assignedRoom || 'Inget rum tilldelat')}</p>
-			</div>
-
-			<div className={styles.sectionWithTitle}>
-				<label>Deltagare</label>
-				<p>
-					{(() => {
-						const currentUser = getCurrentUser();
-						const allParticipants = [currentUser, ...booking.participants.filter(p => p.id !== currentUser.id)];
-						return allParticipants.map(p => p.name).join(", ");
-					})()}
-				</p>
+			{/* Room - Where */}
+			<div className={styles.section}>
+				<div className={styles.sectionWithTitle}>
+					<label>{booking.selectedRoom !== "allRooms" ? "Rum" : "Tilldelat rum"}</label>
+					<p>{booking.selectedRoom !== "allRooms" ? booking.selectedRoom : (booking.assignedRoom || 'Inget rum tilldelat')}</p>
+				</div>
 			</div>
 
+			{/* Actions */}
 			<div className={styles.formActions}>
 				<Button className={styles.cancelButton} onPress={onClose}>
 					Avbryt

my-app/src/components/InlineBookingForm.module.css

@@ -8,6 +8,7 @@
 	animation: slideDown 0.2s ease-out;
 	width: 100%;
 	flex-basis: 100%;
+	max-width: none;
 	position: relative;
 }
 
@@ -63,11 +64,19 @@
 
 .formHeader {
 	text-align: center;
-	margin-bottom: 1.5rem;
-	padding-bottom: 1rem;
+	margin-bottom: 1rem;
+	padding-bottom: 0.75rem;
 	border-bottom: 1px solid #E5E7EB;
 }
 
+.section {
+	margin-bottom: 1.5rem;
+}
+
+.section:last-of-type {
+	margin-bottom: 0;
+}
+
 .formHeader h3 {
 	margin: 0 0 0.5rem 0;
 	font-size: 1.25rem;
@@ -82,7 +91,7 @@
 }
 
 .timeDisplay {
-	margin-bottom: 1.5rem;
+	margin-bottom: 1rem;
 }
 
 .timeRange {
@@ -158,8 +167,8 @@
 .formActions {
 	display: flex;
 	gap: 1rem;
-	margin-top: 1.5rem;
-	padding-top: 1rem;
+	margin-top: 2rem;
+	padding-top: 1.5rem;
 	border-top: 1px solid #E5E7EB;
 }