Update leaderboard.html

Author: thecodersclub-mce

leaderboard.html

@@ -186,52 +186,52 @@
     }
     .button-container {
         padding: 10px; /* Adjust padding for the button container */
-        text-align: center; /* Center buttons if they wrap */
+        text-align: center; /* Center buttons if they wrap (though nav buttons should fit) */
     }
 
-    /* --- Key changes for the Week/Quiz tab buttons (Brain Cache & Mindmash) --- */
+    /* --- Critical changes for the Week/Quiz tab buttons (Brain Cache & Mindmash) --- */
     .tab-nav {
-        /* Prevents wrapping and enables horizontal scrolling */
-        flex-wrap: nowrap; /* Forces all items onto a single line */
-        overflow-x: auto;   /* Enables horizontal scrolling when content overflows */
-        -webkit-overflow-scrolling: touch; /* Improves scrolling on iOS devices */
-        justify-content: flex-start; /* Align buttons to the start of the scrollable area */
-        padding: 5px; /* Adjust padding as needed */
-        width: 100%; /* Ensure it takes full width to enable proper scrolling */
+        display: flex; /* Ensure flexbox is active */
+        flex-wrap: nowrap; /* IMP: Force all items onto a single line */
+        justify-content: space-around; /* Distribute space evenly between items */
+        overflow: hidden; /* IMP: Hide any overflowing content */
+        padding: 5px 0; /* Adjust padding if needed, make sure it doesn't push content out */
+        width: 100%; /* Ensure it takes full width to distribute space */
         box-sizing: border-box; /* Include padding in width calculation */
     }
 
     .tab-button {
-        /* Prevent shrinking below content size and maintain some minimum width */
-        flex-shrink: 0; /* Prevents buttons from shrinking */
-        min-width: fit-content; /* Allows button to be as wide as its content */
-        padding: 8px 12px; /* Maintain good padding */
-        margin: 0 4px; /* Add horizontal spacing between buttons */
-        font-size: 0.9em; /* Slightly smaller font for more buttons on screen */
+        flex: 1; /* IMP: Allow buttons to grow and shrink to fill available space evenly */
+        min-width: 0; /* Allow the button to shrink smaller than its content, but handle overflow */
+        padding: 8px 4px; /* Reduced padding for more content space */
+        margin: 0 2px; /* Minimal margin between buttons */
+        font-size: 0.75em; /* Adjusted font size for fitting. This is the compromise. */
+        white-space: nowrap; /* IMP: Prevent text from wrapping inside the button */
+        overflow: hidden; /* IMP: Hide overflowing text */
+        text-overflow: ellipsis; /* IMP: Show "..." for hidden overflowing text */
+        box-sizing: border-box; /* Include padding and border in the width calculation */
     }
 
-    /* Remove any specific first/last child styling if it interferes with uniform appearance in a scrollable row */
-    .tab-button:first-child {
-        margin-left: 0; /* No left margin for the first button in the row */
-    }
-    .tab-button:last-child {
-        margin-right: 0; /* No right margin for the last button in the row */
+    /* Ensure active button styling doesn't break layout */
+    .tab-button.active {
+        border-radius: 6px; /* Consistent border radius */
     }
 
     /* General mini-window adjustments for small screens */
     .mini-window {
-        width: 95%; /* Give it a bit more width on small screens */
+        width: 98%; /* Even wider to maximize button space */
         margin: 10px auto 30px auto; /* Adjust vertical margins */
-        padding: 10px; /* Reduce overall padding */
+        padding: 8px; /* Reduce overall padding */
     }
 
     /* Table cell adjustments for readability on small screens */
     th, td {
-        padding: 8px 5px; /* Reduce padding inside table cells */
-        font-size: 0.9em; /* Slightly smaller text in tables */
+        padding: 6px 4px; /* Reduce padding inside table cells */
+        font-size: 0.85em; /* Slightly smaller text in tables for tight fit */
     }
     table {
-        min-width: 300px; /* Ensure table doesn't get too squished */
+        min-width: 100%; /* Ensure table utilizes all available width */
+        font-size: 0.9em;
     }
 }
         /* Media Queries for Leaderboard specific elements */