From 8593bdac1961a4d9702fbe642358167381c7223c Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Sun, 23 Mar 2025 19:42:13 +0000
Subject: [PATCH] fixed TeamId page

Fixed the issue with the scroll div not rendering correctly did some maths for it to render correctly based on the padding it needs and the view height.
---
 app/(main)/[teamId]/page.js | 27 +++++++--------------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/app/(main)/[teamId]/page.js b/app/(main)/[teamId]/page.js
index 60a9fa8..846eea8 100644
--- a/app/(main)/[teamId]/page.js
+++ b/app/(main)/[teamId]/page.js
@@ -270,7 +270,7 @@ export default function TeamPage({ params }) {
           flex-direction: column;
           align-items: center;
           width: 100%;
-          padding: 20px 0 120px 0;
+          padding: 20px 0 0 0;
           flex-grow: 1;
         }
 
@@ -339,14 +339,10 @@ export default function TeamPage({ params }) {
           position: relative;
           z-index: 2;
           padding: 60px 20px 80px 20px;
-          margin: 0 auto;
+          margin: 20px auto 0;
           width: 90vw;
           flex: 1;
-          flex-grow: 1;
-          min-height: 70vh;
-          height: 100%;
-          margin-top: 30px;
-          margin-bottom: 40px;
+          height: calc(100vh - 70px - 68px - 40px);
           overflow-y: auto;
         }
 
@@ -354,19 +350,20 @@ export default function TeamPage({ params }) {
           .scroll-background {
             width: 95%;
             padding: 50px 15px 70px 15px;
-            min-height: 60vh;
           }
 
           .members-title {
-            margin-top: -25px;
+            margin-top: -20px;
           }
 
           .team-actions {
             width: 90%;
             bottom: 70px;
           }
+
           .member-card {
-            max-width: 300px;
+            width: calc(100% - 8px);
+            max-width: calc(100% - 8px);
           }
         }
 
@@ -375,7 +372,6 @@ export default function TeamPage({ params }) {
           flex-direction: column;
           width: 100%;
           flex: 1;
-          flex-grow: 1;
         }
 
         .members-title {
@@ -389,7 +385,6 @@ export default function TeamPage({ params }) {
 
         .members-content {
           flex: 1;
-          flex-grow: 1;
           display: flex;
           flex-direction: column;
           padding: 10px;
@@ -479,12 +474,10 @@ export default function TeamPage({ params }) {
         @media (max-height: 500px) {
           .content-wrapper {
             padding-top: 60px;
-            padding-bottom: 80px;
           }
 
           .scroll-background {
             padding: 40px 15px 60px 15px;
-            min-height: 60vh;
           }
 
           .members-title {
@@ -496,12 +489,6 @@ export default function TeamPage({ params }) {
             bottom: 75px;
           }
         }
-
-        @media (min-height: 1000px) {
-          .scroll-background {
-            min-height: 75vh;
-          }
-        }
       `}</style>
     </div>
   );