diff --git a/frontend/src/components/BookingForm.tsx b/frontend/src/components/BookingForm.tsx index 8d67f3f1..82bb2c1f 100644 --- a/frontend/src/components/BookingForm.tsx +++ b/frontend/src/components/BookingForm.tsx @@ -478,22 +478,20 @@ const BookingForm: React.FC = ({ : invitees .map((value) => { const user = users.find((u) => u.email === value); - if (user && user.name && user.email) { - return `${user.name} <${user.email}>`; - } else if (user && user.name) { - return user.name; - } else { - return value; - } + return user && user.name ? user.name : value; }) .join(", ") } fullWidth margin="normal" InputProps={{ readOnly: true }} - className="bookingform-viewfield" + className="bookingform-viewfield bookingform-viewfield-multiline" disabled + multiline + minRows={1} + maxRows={Infinity} placeholder={invitees.length === 0 ? "No invitees" : undefined} + sx={{ width: "100%", resize: "vertical" }} /> ) : ( diff --git a/frontend/src/styles/BookingForm.css b/frontend/src/styles/BookingForm.css index c00b62f8..2d871543 100644 --- a/frontend/src/styles/BookingForm.css +++ b/frontend/src/styles/BookingForm.css @@ -4,6 +4,19 @@ background: var(--view-mode-bg-color, #f0f0f0); opacity: 0.8; -webkit-text-fill-color: var(--view-mode-color, rgba(34, 34, 34, 0.8)); + /* Ensure the field stretches horizontally */ + width: 100%; +} + +.bookingform-viewfield-multiline .MuiInputBase-root, +.bookingform-viewfield-multiline textarea { + /* Allow vertical growth and prevent text cutoff */ + min-height: 2.5em; + max-height: none; + overflow-y: visible; + resize: vertical; + white-space: pre-wrap; + word-break: break-word; } /* Label background for InputLabel */