Still altering the scroll div + minor change to clue page

making a minor change to the clue page so that the clue page renders the clues properly for the ones that are found , this is so that the found clues have their time stamp in the correct places.

app/(main)/[teamId]/page.js

@@ -270,7 +270,8 @@ export default function TeamPage({ params }) {
           flex-direction: column;
           align-items: center;
           width: 100%;
-          padding: 80px 0 100px 0; 
+          padding: 20px 0 120px 0;
+          flex-grow: 1;
         }
 
         .waves-container {
@@ -339,28 +340,34 @@ export default function TeamPage({ params }) {
           z-index: 2;
           padding: 60px 20px 80px 20px;
           margin: 0 auto;
-          width: 90%;
-          max-width: 800px;
+          width: 90vw;
           flex: 1;
-          min-height: 60vh;
+          flex-grow: 1;
+          min-height: 70vh;
+          height: 100%;
+          margin-top: 30px;
+          margin-bottom: 40px;
           overflow-y: auto;
         }
 
-        @media (max-width: 768px) {
+        @media (max-width < 800px) {
           .scroll-background {
             width: 95%;
             padding: 50px 15px 70px 15px;
-            min-height: 50vh; 
+            min-height: 60vh;
           }
 
           .members-title {
-            margin-top: -20px;
+            margin-top: -25px;
           }
 
           .team-actions {
             width: 90%;
             bottom: 70px;
           }
+          .member-card {
+            max-width: 300px;
+          }
         }
 
         .members-container {
@@ -368,6 +375,7 @@ export default function TeamPage({ params }) {
           flex-direction: column;
           width: 100%;
           flex: 1;
+          flex-grow: 1;
         }
 
         .members-title {
@@ -376,15 +384,16 @@ export default function TeamPage({ params }) {
           margin-bottom: 15px;
           color: #68543c;
           text-align: center;
-          margin-top: -30px;
+          margin-top: -50px;
         }
 
         .members-content {
           flex: 1;
-          overflow-y: auto;
-          padding: 10px;
+          flex-grow: 1;
           display: flex;
           flex-direction: column;
+          padding: 10px;
+          min-height: 200px;
         }
 
         .members-list {
@@ -490,7 +499,7 @@ export default function TeamPage({ params }) {
 
         @media (min-height: 1000px) {
           .scroll-background {
-            min-height: 65vh;
+            min-height: 75vh;
           }
         }
       `}</style>

app/(main)/stats/page.js

@@ -99,7 +99,7 @@ export default function StatsPage() {
                     {clue.title || `Clue #${clue.id}`}
                   </div>
                   <div className="clue-time">
-                    {new Date(clue.found_at).toLocaleTimeString()}
+                    Found at: {new Date(clue.found_at).toLocaleTimeString()}
                   </div>
                 </div>
               </li>
@@ -109,7 +109,7 @@ export default function StatsPage() {
           )}
         </ul>
 
-        <h3 className="section-title">
+        <h3 className="section-title section-title-skipped">
           Skipped Clues ({skippedClues?.length || 0})
         </h3>
         <ul className="clue-list">
@@ -121,7 +121,7 @@ export default function StatsPage() {
                     {clue.title || `Clue #${clue.id}`}
                   </div>
                   <div className="clue-time">
-                    Skipped at {new Date(clue.found_at).toLocaleTimeString()}
+                    Skipped at: {new Date(clue.found_at).toLocaleTimeString()}
                   </div>
                 </div>
               </li>
@@ -279,6 +279,10 @@ export default function StatsPage() {
           font-weight: 600;
         }
 
+        .section-title-skipped {
+          margin-top: 30px; 
+        }
+
         .clue-list {
           list-style: none;
           padding: 0;
@@ -289,7 +293,7 @@ export default function StatsPage() {
           padding: 12px 15px;
           border-bottom: 1px solid #eee;
           background-color: #f9f9f9;
-          margin-bottom: 5px;
+          margin-bottom: 10px; 
           border-radius: 4px;
           border-left: 3px solid #4caf50;
         }