Add scroll down to create event popup

frontend/src/components/EventForm.css

@@ -5,9 +5,11 @@
   right: 0;
   bottom: 0;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  z-index: 1000;
+  z-index: 2000;
+  padding: 1.5rem 1rem;
+  overflow-y: auto;
 }
 
 .event-form-overlay {
@@ -28,6 +30,8 @@
   padding: 2rem;
   max-width: 500px;
   width: 90%;
+  max-height: calc(100vh - 3rem);
+  overflow-y: auto;
   box-shadow: var(--shadow-heavy);
 }
 
@@ -130,8 +134,14 @@
 }
 
 @media (max-width: 600px) {
+  .event-form-container {
+    padding: 0.75rem;
+  }
+
   .event-form {
     padding: 1.5rem;
+    width: 100%;
+    max-height: calc(100vh - 1.5rem);
   }
 
   .event-form h2 {

frontend/src/components/EventForm.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { createEvent, uploadImage } from '../api/api'
 import './EventForm.css'
 
@@ -46,6 +46,15 @@ function EventForm({ onEventCreated, onCancel }) {
   const [error, setError] = useState('')
   const fileInputRef = useRef(null)
 
+  useEffect(() => {
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+
+    return () => {
+      document.body.style.overflow = previousOverflow
+    }
+  }, [])
+
   const handleChange = (e) => {
     const { name, value } = e.target
     setFormData(prev => ({
@@ -94,8 +103,15 @@ function EventForm({ onEventCreated, onCancel }) {
 
   return (
     <div className="event-form-container">
-      <div className="event-form-overlay" onClick={onCancel}></div>
+      <div
-      <div className="event-form">
+        className="event-form-overlay"
+        onMouseDown={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          onCancel()
+        }}
+      ></div>
+      <div className="event-form" onMouseDown={(e) => e.stopPropagation()}>
         <h2>{he.createNewEvent}</h2>
         {error && <div className="error-message">{error}</div>}