fix(index.html): Mobile Ideal tab visibilityHEADmain

1 files changed, 27 insertions, 5 deletions

diff --git a/index.html b/index.html
index 6cec859..d08f4ab 100644
--- a/index.html
+++ b/index.html
@@ -238,6 +238,25 @@
       .table-wrapper {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
+        scrollbar-width: thin;
+        scrollbar-color: var(--border) var(--surface);
+      }
+
+      .table-wrapper::-webkit-scrollbar {
+        height: 8px;
+      }
+
+      .table-wrapper::-webkit-scrollbar-track {
+        background: var(--surface);
+      }
+
+      .table-wrapper::-webkit-scrollbar-thumb {
+        background: var(--border);
+        border-radius: 4px;
+      }
+
+      .table-wrapper::-webkit-scrollbar-thumb:hover {
+        background: rgba(255, 255, 255, 0.15);
       }
 
       table {
@@ -535,11 +554,6 @@
       }
 
       @media (max-width: 480px) {
-        th:nth-child(5),
-        td:nth-child(5) {
-          display: none;
-        }
-
         .header h1 {
           font-size: 1.5rem;
         }
@@ -550,11 +564,19 @@
 
         table {
           font-size: 0.75rem;
+          min-width: 600px; /* Ensure table is wide enough to require scrolling */
         }
 
         th,
         td {
           padding: var(--spacing-xs) var(--spacing-sm);
+          white-space: nowrap; /* Prevent text wrapping */
+        }
+
+        /* Make sure table wrapper shows scrollbar on mobile */
+        .table-wrapper {
+          overflow-x: scroll;
+          -webkit-overflow-scrolling: touch;
         }
       }