Comments and styling added to league page. More debugging and optimization needed. Table and top scorers are no longer aligned at larger widths

ProjectSourceCode/src/resources/css/league-pages/league-page.css

@@ -1,7 +1,7 @@
 #league-page-body {
     display: flex;
     flex-direction: column;
-    width: 100v;
+    width: 100vh;
 }
 
 #league-information-container {
@@ -72,14 +72,10 @@
     box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
 }
 
-@media (max-width: 1161px) {
-    #league-stats-container {
-        flex-direction: column;
-    }
-
-    #league-table-and-information-container,
-    #top-scorers-container {
-        width: 100%; /* Both containers take full width */
+@media (max-width: 950px) {
+    #league-stats-containers {
+        flex-direction: column; /* Change flex direction to column */
     }
 }
+
     

ProjectSourceCode/src/resources/css/league-pages/league-table.css

@@ -11,6 +11,10 @@
     padding: 15px;
 }
 
+#table-stats-container {
+   width: 100%;
+}
+
 #table-stats-container th {
     border-bottom: 3px solid red; /* Add red bottom border */
 }
@@ -57,3 +61,9 @@
         text-decoration: underline; /* Add underline effect */
     }
 }
+
+@media (max-width: 950px) {
+    #league-table-and-information-container {
+        width: 100%; /* Set the width to 60% when window width is less than 1161px */
+    }
+}

ProjectSourceCode/src/resources/css/league-pages/top-scorers.css

@@ -1,5 +1,6 @@
 #top-scorers-container {
     flex: 1;
+    width: 100%;
     /* Add any other styling you need for the top scorers container */
 }