src/app/(main)/events/[eventID]/page.tsx

@@ -40,14 +40,12 @@ export default function ShowEvent() {
 
   if (isLoading || userLoading) {
     return (
-      <div className='flex justify-center items-center h-screen'>
-        Loading...
-      </div>
+      <div className='flex justify-center items-center h-full'>Loading...</div>
     );
   }
   if (error || !eventData?.data?.event) {
     return (
-      <div className='flex justify-center items-center h-screen'>
+      <div className='flex justify-center items-center h-full'>
         Error loading event.
       </div>
     );
@@ -70,7 +68,7 @@ export default function ShowEvent() {
   };
 
   return (
-    <div className='flex items-center justify-center h-screen'>
+    <div className='flex items-center justify-center h-full'>
       <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] mx-auto'>
         <CardHeader className='p-0 m-0 gap-0' />
 

src/app/(main)/events/new/page.tsx

@@ -4,7 +4,7 @@ import { Suspense } from 'react';
 
 export default function NewEvent() {
   return (
-    <div className='flex flex-col items-center justify-center h-screen'>
+    <div className='flex flex-col items-center justify-center h-full'>
       <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
         <CardHeader className='p-0 m-0 gap-0' />
 

src/app/(main)/events/page.tsx

@@ -17,7 +17,7 @@ export default function Events() {
   const events = eventsData?.data?.events || [];
 
   return (
-    <div className='relative h-screen flex flex-col items-center'>
+    <div className='relative h-full flex flex-col items-center'>
       {/* Heading */}
       <h1 className='text-3xl font-bold mt-8 mb-4 text-center z-10'>
         My Events