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

@@ -4,6 +4,8 @@ import { convertDateObjectToString, getTimeFromIndex } from '../../helpers';
 import Dropdown from '../ui/Dropdown';
 import { useBookingContext } from '../../context/BookingContext';
 import { useSettingsContext } from '../../context/SettingsContext';
+import { BookingTitleField } from '../forms/BookingTitleField';
+import { ParticipantsSelector } from '../forms/ParticipantsSelector';
 import styles from './BookingModal.module.css';
 
 export function BookingModal({ 
@@ -107,8 +109,9 @@ export function BookingModal({
 		>
 			<Dialog style={{overflow: 'hidden'}}>
 				<form>
-					<Heading slot="title">{booking.title == "" ? getDefaultBookingTitle() : booking.title}</Heading>
+					<Heading slot="title">Ny bokning</Heading>
 					<p>{convertDateObjectToString(booking.selectedDate)}</p>
+					<BookingTitleField />
 					<div className={styles.timeDisplay}>
 						<div className={styles.timeRange}>
 							<div className={styles.startTimeSection}>
@@ -131,22 +134,8 @@ export function BookingModal({
 							</div>
 						</div>
 					</div>
+										<ParticipantsSelector />
 
-					<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>
-					</div>
 					<div className={styles.modalFooter}>
 						<Button className={styles.cancelButton} slot="close">
 							Avbryt

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

@@ -304,4 +304,11 @@
 .disabledButton:active {
     background-color: var(--button-disabled-bg) !important;
     transform: none !important;
+}
+
+.bookingForms {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 1rem 0;
 }

my-app/src/pages/NewBooking.jsx

@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
 import styles from './NewBooking.module.css';
 import { TimeCardContainer } from '../components/ui/TimeCardContainer';
 import { BookingDatePicker } from '../components/forms/BookingDatePicker';
-import { BookingTitleField } from '../components/forms/BookingTitleField';
-import { ParticipantsSelector } from '../components/forms/ParticipantsSelector';
 import { RoomSelectionField } from '../components/forms/RoomSelectionField';
 import { BookingLengthField } from '../components/forms/BookingLengthField';
 import { useBookingState } from '../hooks/useBookingState';
@@ -64,13 +62,6 @@ export function NewBooking({ addBooking }) {
 				<h2>Boka litet grupprum</h2>
 				<div className={styles.formContainer}>
 					<main style={{ flex: 1 }}>
-						{/* Only show title and participants fields in modal mode */}
-						{!useInlineForm && (
-							<>
-								<BookingTitleField />
-								<ParticipantsSelector />
-							</>
-						)}
 						
 						<div className={styles.bookingTimesContainer}>
 							<BookingDatePicker />