fix: constrain modals to viewport height with internal scrolling

Modal dialogs (e.g. the create-event form) grew beyond the screen and
scrolled the page behind them. Cap the card at the viewport height and
scroll the body inside it, keeping the header pinned.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

server/routes/rooms.js

@@ -244,7 +244,8 @@ router.post('/', authenticateToken, async (req, res) => {
       record_meeting !== false ? 1 : 0,
       guest_access ? 1 : 0,
       moderator_code || null,
-      recording_transcript ? 1 : 0,
+      // Transcription/AI summary requires recording to be enabled
+      (record_meeting !== false && recording_transcript) ? 1 : 0,
     ]);
 
     const room = await db.get('SELECT * FROM rooms WHERE id = ?', [result.lastInsertRowid]);
@@ -306,6 +307,9 @@ router.put('/:uid', authenticateToken, async (req, res) => {
       }
     }
 
+    // Transcription/AI summary requires recording — force it off when recording ends up disabled
+    const effectiveRecordMeeting = record_meeting !== undefined ? !!record_meeting : !!room.record_meeting;
+
     await db.run(`
       UPDATE rooms SET
         name = COALESCE(?, name),
@@ -338,7 +342,7 @@ router.put('/:uid', authenticateToken, async (req, res) => {
       moderator_code !== undefined ? (moderator_code || null) : room.moderator_code,
       learning_analytics !== undefined ? (learning_analytics ? 1 : 0) : null,
       analytics_visibility && ['owner', 'shared'].includes(analytics_visibility) ? analytics_visibility : null,
-      recording_transcript !== undefined ? (recording_transcript ? 1 : 0) : null,
+      !effectiveRecordMeeting ? 0 : (recording_transcript !== undefined ? (recording_transcript ? 1 : 0) : null),
       req.params.uid,
     ]);
 

src/components/Modal.jsx

@@ -42,10 +42,10 @@ export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg'
         aria-modal="true"
         aria-labelledby={titleId}
         tabIndex={-1}
-        className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth} focus:outline-hidden`}
+        className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth} max-h-[calc(100vh-2rem)] flex flex-col focus:outline-hidden`}
       >
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl shrink-0">
           <h2 id={titleId} className="text-lg font-semibold text-th-text">{title}</h2>
           <button
             type="button"
@@ -56,8 +56,8 @@ export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg'
             <X size={20} />
           </button>
         </div>
-        {/* Body */}
+        {/* Body — scrolls inside the card instead of overflowing the viewport */}
-        <div className="p-6">
+        <div className="p-6 overflow-y-auto min-h-0">
           {children}
         </div>
       </div>

src/pages/RoomDetail.jsx

@@ -205,7 +205,7 @@ export default function RoomDetail() {
         moderator_code: editRoom.moderator_code,
         learning_analytics: !!editRoom.learning_analytics,
         analytics_visibility: editRoom.analytics_visibility || 'owner',
-        recording_transcript: !!editRoom.recording_transcript,
+        recording_transcript: !!editRoom.record_meeting && !!editRoom.recording_transcript,
       });
       setRoom(res.data.room);
       setEditRoom(res.data.room);
@@ -674,7 +674,12 @@ export default function RoomDetail() {
               <input
                 type="checkbox"
                 checked={!!editRoom.record_meeting}
-                onChange={e => setEditRoom({ ...editRoom, record_meeting: e.target.checked })}
+                onChange={e => setEditRoom({
+                  ...editRoom,
+                  record_meeting: e.target.checked,
+                  // Transcription/AI summary requires recording — clear it when recording is turned off
+                  recording_transcript: e.target.checked ? editRoom.recording_transcript : false,
+                })}
                 className="w-4 h-4 rounded-sm border-th-border text-th-accent focus:ring-th-ring"
               />
               <span className="text-sm text-th-text">{t('room.allowRecording')}</span>