Fixing some booking form stuff.

Signed-off-by: Cliff Hill <xlorep@darkhelm.org>

frontend/src/components/BookingForm.tsx

@@ -478,22 +478,20 @@ const BookingForm: React.FC<BookingFormProps> = ({
                   : 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" }}
             />
           ) : (
             <FormControl fullWidth margin="normal" error={remainingSlots < 0}>

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 */