save

Author: atharvas

src/components/AgentAdvantageTable.svelte

@@ -210,13 +210,45 @@
         padding: 0.5rem 0;
     }
 
-    @media (max-width: 700px) {
+    @media (max-width: 900px) {
         h4 {
             font-size: var(--18px);
         }
 
         .advantage-table-wrapper :global(.wx-grid) {
             font-size: 14px;
+            overflow-x: auto;
+        }
+
+        /* Make table horizontally scrollable */
+        .advantage-table-wrapper :global(.wx-grid-container) {
+            overflow-x: auto;
+            -webkit-overflow-scrolling: touch;
+        }
+    }
+
+    @media (max-width: 700px) {
+        h4 {
+            font-size: var(--16px);
+        }
+
+        .advantage-table-wrapper :global(.wx-grid) {
+            font-size: 12px;
+        }
+
+        /* Reduce column widths for mobile */
+        .advantage-table-wrapper :global([data-col-id="agent"]) {
+            min-width: 100px;
+            font-size: 12px;
+        }
+
+        .advantage-table-wrapper :global(.wx-cell) {
+            padding: 0.5rem 0.25rem;
+        }
+
+        .advantage-table-wrapper :global(.wx-header-cell) {
+            padding: 0.75rem 0.25rem;
+            font-size: 11px;
         }
     }
 </style>

src/components/AgentCard.Nav.svelte

@@ -117,18 +117,26 @@
 <style>
     nav {
         width: 100%;
-        overflow-x: hidden;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
         position: sticky;
         top: 0;
         display: flex;
         flex-direction: row;
-        overflow: hidden;
         min-height: 5rem;
+        height: auto;
         pointer-events: auto;
         cursor: pointer;
         z-index: 1000;
-        background: rgba(24,26,31,0.98);
+        background: rgba(24,26,31,1);
         border-bottom: 1px solid var(--wine-dark-gray);
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE and Edge */
+    }
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    nav::-webkit-scrollbar {
+        display: none;
     }
 
     .agent-group {
@@ -198,9 +206,34 @@
         transition: all var(--250ms);
     }
 
+    /* Flex spacers for centering when content fits */
+    nav::before,
+    nav::after {
+        content: "";
+        flex: 1 0 0;
+    }
+
+    .agent-group {
+        flex: 0 0 auto; /* don't stretch cards */
+        scroll-snap-align: center; /* snap each card to center */
+    }
+
     @media (max-width: 700px) {
+        nav {
+            min-height: 4rem;
+            justify-content: flex-start; /* Remove centering on mobile to avoid white space */
+        }
+
+        /* Remove flex spacers on mobile */
+        nav::before,
+        nav::after {
+            display: none;
+        }
+
 		.agent-group {
             min-width: 100px;
+            margin: 0 0.5rem;
+            padding: 1rem 0 0.75rem 0;
         }
 
         .label-wrapper {
@@ -217,23 +250,5 @@
             transition: all var(--250ms);
         }
 	}
-    nav {
-    /* existing styles ... */
-    display: flex;
-    justify-content: center;           /* center when content fits */
-    scroll-snap-type: x mandatory;     /* optional: nice snap feel */
-    }
-
-    /* invisible flex spacers so content is centered when it doesn't overflow */
-    nav::before,
-    nav::after {
-    content: "";
-    flex: 1 0 0;
-    }
-
-    .agent-group {
-    flex: 0 0 auto;                    /* don't stretch cards */
-    scroll-snap-align: center;         /* optional: snap each card to center */
-    }
 
 </style>

src/components/Filters.svelte

@@ -421,26 +421,64 @@
         display: none;
     }
 
+    @media(max-width: 900px) {
+        .select-wrapper {
+            gap: 0.75rem;
+        }
+
+        .filter, .search-wrapper {
+            width: calc(50% - 0.375rem);
+        }
+
+        :global(#filters .multiselect) {
+            font-size: var(--14px) !important;
+        }
+
+        :global([data-svelte-typeahead] input) {
+            font-size: var(--14px) !important;
+        }
+    }
+
     @media(max-width: 700px) {
+        #filters {
+            padding: 0.75rem;
+        }
+
         .select-wrapper {
-            flex-wrap: wrap;
-            gap: 0.5rem;
+            flex-direction: column;
+            gap: 0.75rem;
         }
 
         .filter, .search-wrapper {
-            width: calc(50% - 0.25rem);
+            width: 100%;
         }
 
         :global(#filters .multiselect) {
             font-size: var(--14px) !important;
+            height: 2.75rem !important;
         }
 
         :global([data-svelte-typeahead] input) {
             font-size: var(--14px) !important;
+            height: 2.75rem !important;
         }
 
         .steals-sentence {
             font-size: var(--14px);
         }
     }
+
+    @media(max-width: 480px) {
+        .steals-sentence {
+            font-size: var(--12px);
+        }
+
+        :global(#filters .multiselect) {
+            font-size: var(--13px) !important;
+        }
+
+        :global([data-svelte-typeahead] input) {
+            font-size: var(--13px) !important;
+        }
+    }
 </style>

src/components/Intro.Agents.svelte

@@ -220,22 +220,58 @@
 
   @media (max-width: 700px) {
     .agent-stage {
-      flex-direction: column;
+      flex-direction: row;
+      flex-wrap: wrap;
       align-items: center;
-      gap: 1.5rem;
+      justify-content: center;
+      gap: 1rem;
       height: auto;
       min-height: 60svh;
-      padding: 2rem;
+      padding: 1rem;
+    }
+
+    .agent-box {
+      width: calc(50% - 0.5rem);
+      min-width: 140px;
+      max-width: 180px;
+      padding: 1.25rem 0.75rem;
+    }
+
+    .agent-icon {
+      width: 40px;
+      height: 40px;
+      margin-bottom: 0.75rem;
+    }
+
+    .agent-name {
+      font-size: var(--14px);
     }
 
+    .agent-framework {
+      font-size: var(--10px);
+      margin-top: 0.25rem;
+    }
+  }
+
+  @media (max-width: 400px) {
     .agent-box {
-      width: 80vw;
-      max-width: 300px;
+      width: calc(50% - 0.5rem);
+      min-width: 120px;
+      padding: 1rem 0.5rem;
     }
 
     .agent-icon {
-      width: 56px;
-      height: 56px;
+      width: 36px;
+      height: 36px;
+      margin-bottom: 0.5rem;
+    }
+
+    .agent-name {
+      font-size: var(--12px);
+    }
+
+    .agent-framework {
+      font-size: var(--9px);
     }
   }
 </style>

src/components/Leaderboard.svelte

@@ -255,4 +255,31 @@
             font-size: var(--12px);
         }
     }
+
+    @media (max-width: 480px) {
+        h2 {
+            font-size: var(--20px);
+        }
+
+        .description {
+            font-size: var(--13px);
+        }
+
+        th, td {
+            padding: 0.4rem 0.2rem;
+            font-size: var(--10px);
+        }
+
+        .agent-name {
+            font-size: var(--11px);
+        }
+
+        .score-cell {
+            font-size: var(--10px);
+        }
+
+        .overall-cell {
+            font-size: var(--12px);
+        }
+    }
 </style>