fix: limit announcement modal height (#307)

Author: kushbosamiya

src/components/Announcement.tsx

@@ -24,10 +24,10 @@ const PrettyIcon = ({ color, icon }: { color?: string; icon: React.ReactNode })
   return (
     <div
       style={{
-        width: '100%',
+        width: 'calc(100% + 2rem)',
         display: 'flex',
         height: '100px',
-        marginTop: '-1rem',
+        margin: '-1rem -1rem 0 -1rem',
         alignItems: 'center',
         justifyContent: 'center',
         background: `radial-gradient(${circle}, ${gradient.join(', ')})`,

src/components/FlexCol.tsx

@@ -11,6 +11,7 @@ interface FlexColProps {
   padding?: string
   strech?: boolean
   testId?: string
+  style?: React.CSSProperties
 }
 
 export default function FlexCol({
@@ -24,6 +25,7 @@ export default function FlexCol({
   padding,
   strech,
   testId,
+  style: customStyle,
 }: FlexColProps) {
   const style: any = {
     alignItems: centered ? 'center' : end ? 'end' : strech ? 'strech' : 'start',
@@ -36,6 +38,7 @@ export default function FlexCol({
     margin,
     padding,
     width: '100%',
+    ...customStyle
   }
 
   return (

src/components/Modal.tsx

@@ -1,38 +1,45 @@
 import { useEffect } from 'react'
+import { createPortal } from 'react-dom'
 
 export default function Modal({ children }: { children: React.ReactNode }) {
   const overlayStyle = {
     top: '0',
     left: '0',
-    zIndex: 21,
+    zIndex: 80,
     opacity: 0.5,
     width: '100%',
     height: '100%',
-    position: 'absolute' as 'absolute',
+    position: 'fixed' as 'fixed',
     backgroundColor: 'var(--ion-background-color)',
   }
 
   const containerStyle = {
     top: '0',
     left: '0',
-    zIndex: 22, // Higher than overlay
+    zIndex: 90,   
     width: '100%',
     height: '100%',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    position: 'absolute' as 'absolute',
-    pointerEvents: 'none' as 'none', // Allow clicks to pass through to children
+    position: 'fixed' as 'fixed',
+    pointerEvents: 'none' as 'none', 
   }
 
   const innerStyle = {
     opacity: 1,
     padding: '1rem',
     maxWidth: 'min(22rem, 90%)',
+    maxHeight: 'calc(100vh - 4rem)', 
+    position: 'relative' as 'relative', 
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+    overflowY: 'auto' as 'auto', 
     borderRadius: '0.5rem',
     border: '1px solid var(--dark10)',
     backgroundColor: 'var(--ion-background-color)',
-    pointerEvents: 'auto' as 'auto', // Enable clicks on the modal content
+    pointerEvents: 'auto' as 'auto', 
+    zIndex: 95,
   }
 
   useEffect(() => {
@@ -49,12 +56,15 @@ export default function Modal({ children }: { children: React.ReactNode }) {
     }
   }, [])
 
-  return (
+  return createPortal(
     <>
       <div style={overlayStyle} />
       <div style={containerStyle}>
-        <div style={innerStyle}>{children}</div>
+        <div style={innerStyle} className='modal-inner'>
+          {children}
+        </div>
       </div>
-    </>
+    </>,
+    document.body
   )
 }