Fixed for mobile

Author: vitaglianog

style.css

@@ -10,12 +10,16 @@ body {
   line-height: 1.6;
   color: #333;
   background-color: #f8f9fa;
+  overflow-x: hidden;
 }
 
 /* Container layout */
 .container {
   display: flex;
   min-height: 100vh;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 /* Sidebar styles */
@@ -822,73 +826,102 @@ input:checked + .toggle-slider:before {
 @media (max-width: 768px) {
   .container {
     flex-direction: column;
+    width: 100%;
   }
 
   .sidebar {
     width: 100%;
     height: auto;
     position: relative;
     padding: 1rem;
-    flex-direction: row;
-    justify-content: space-between;
+    flex-direction: column;
+    justify-content: flex-start;
     align-items: center;
   }
 
   .sidebar h3 {
     margin-bottom: 0;
     font-size: 1.2rem;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 0.75rem;
+  }
+  
+  .sidebar nav {
+    width: 100%;
   }
 
   .sidebar nav ul {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
     gap: 0.5rem;
+    width: 100%;
   }
 
   .sidebar nav li {
-    margin: 0.25rem;
+    margin: 0;
+  }
+  
+  .sidebar nav a {
+    text-align: center;
+    padding: 0.5rem;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .sidebar-footer {
-    margin-top: 0;
-    padding-top: 0;
-    border-top: none;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    width: 100%;
   }
 
   .logo-section {
     flex-direction: row;
     gap: 0.5rem;
+    justify-content: center;
   }
 
   .mit-logo {
-    width: 40px;
+    width: 35px;
   }
 
   .organization-info {
     text-align: left;
   }
 
   .org-name {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
     margin-bottom: 0.25rem;
   }
 
   .copyright, .license {
-    font-size: 0.7rem;
+    font-size: 0.65rem;
   }
 
   .main-content {
     margin-left: 0;
-    padding: 1rem;
+    padding: 0.5rem;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
   }
 
   .about-section h1 {
     font-size: 2rem;
   }
 
   #leaderboard-table {
-    font-size: 0.85rem;
+    font-size: 0.75rem;
+  }
+  
+  .table-container {
+    margin-left: -1rem;
+    margin-right: -1rem;
+    border-radius: 0;
+    width: calc(100% + 2rem);
   }
 
   .leaderboard-controls {
@@ -929,7 +962,13 @@ input:checked + .toggle-slider:before {
 
   #leaderboard-table th,
   #leaderboard-table td {
-    padding: 0.5rem;
+    padding: 0.4rem 0.3rem;
+    font-size: 0.8rem;
+  }
+  
+  #leaderboard-table th {
+    font-size: 0.75rem;
+    padding: 0.6rem 0.3rem;
   }
 
   .resources-buttons {
@@ -949,10 +988,17 @@ input:checked + .toggle-slider:before {
     flex-direction: column;
     align-items: center;
     gap: 1rem;
+    padding: 0.75rem;
   }
 
   .sidebar nav ul {
-    justify-content: center;
+    grid-template-columns: 1fr;
+    gap: 0.4rem;
+  }
+  
+  .sidebar nav a {
+    font-size: 0.85rem;
+    padding: 0.4rem;
   }
 
   .logo-section {
@@ -964,9 +1010,33 @@ input:checked + .toggle-slider:before {
     text-align: center;
   }
 
+  .main-content {
+    padding: 0.25rem;
+  }
+  
   .about-section, .leaderboard-section, .name-origin-section, .resources-section, .contribute-section {
-    padding: 1rem;
-    margin-bottom: 1.5rem;
+    padding: 0.75rem;
+    margin-bottom: 0.75rem;
+    margin-left: 0;
+    margin-right: 0;
+    border-radius: 6px;
+  }
+  
+  .table-container {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    width: calc(100% + 1.5rem);
+  }
+  
+  #leaderboard-table th,
+  #leaderboard-table td {
+    padding: 0.3rem 0.2rem;
+    font-size: 0.7rem;
+  }
+  
+  #leaderboard-table th {
+    font-size: 0.65rem;
+    padding: 0.5rem 0.2rem;
   }
 
   .description p {