changes

src/styles/components.css

@@ -877,10 +877,13 @@ textarea {
   color: var(--dark);
   width: 100%;
   max-width: 820px;
+  max-height: 90vh; /* Keep modal within viewport height */
+  display: flex; /* Allow header + scrollable body */
+  flex-direction: column;
   border-radius: 14px;
   box-shadow: var(--shadow-lg);
   border: 1px solid rgba(148, 163, 184, 0.25);
-  overflow: hidden;
+  overflow: hidden; /* clip internal scrolling */
 }
 
 .modal-header {
@@ -890,6 +893,7 @@ textarea {
   padding: 16px 20px;
   border-bottom: 1px solid rgba(148, 163, 184, 0.15);
   background: linear-gradient(180deg, rgba(30,41,59,0.6), rgba(2,6,23,0.4));
+  flex-shrink: 0; /* keep header visible */
 }
 
 .modal-header h3 {
@@ -901,6 +905,9 @@ textarea {
 
 .modal-body {
   padding: 16px 20px 20px;
+  flex: 1; /* take remaining space */
+  overflow: auto; /* scroll content if too tall */
+  -webkit-overflow-scrolling: touch; /* smooth on iOS */
 }
 
 /* Ensure form inside modal looks nice */