run

Author: atharvas

package-lock.json

@@ -56,6 +56,7 @@
 		"mathjax-full": "^3.2.2",
 		"openai": "^4.28.4",
 		"svelte-carousel": "^1.0.25",
+		"svelte-headless-table": "^0.18.3",
 		"svelte-highlight": "^7.9.0",
 		"svelte-lazy-image": "^0.5.1",
 		"svelte-multiselect": "^10.0.0",

package.json

@@ -449,10 +449,15 @@
             gap: 0.75rem;
         }
 
-        .filter, .search-wrapper {
+        .filter {
             width: 100%;
         }
 
+        /* Hide search/benchmark finder on mobile */
+        .search-wrapper {
+            display: none;
+        }
+
         :global(#filters .multiselect) {
             font-size: var(--14px) !important;
             height: 2.75rem !important;

src/components/Filters.svelte

@@ -221,57 +221,52 @@
   @media (max-width: 700px) {
     .agent-stage {
       flex-direction: row;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
       align-items: center;
       justify-content: center;
-      gap: 1rem;
-      height: auto;
-      min-height: 60svh;
-      padding: 1rem;
+      gap: 0.75rem;
+      height: 80svh;
+      padding: 1rem 0.5rem;
     }
 
     .agent-box {
-      width: calc(50% - 0.5rem);
-      min-width: 140px;
-      max-width: 180px;
-      padding: 1.25rem 0.75rem;
+      flex: 1;
+      width: auto;
+      min-width: 0;
+      max-width: none;
+      padding: 1rem 0.5rem;
     }
 
     .agent-icon {
-      width: 40px;
-      height: 40px;
-      margin-bottom: 0.75rem;
+      width: clamp(32px, 8vw, 48px);
+      height: clamp(32px, 8vw, 48px);
+      margin-bottom: 0.5rem;
     }
 
     .agent-name {
-      font-size: var(--14px);
+      font-size: clamp(12px, 3vw, 16px);
+      line-height: 1.2;
     }
 
     .agent-framework {
-      font-size: var(--10px);
+      font-size: clamp(9px, 2.5vw, 12px);
       margin-top: 0.25rem;
     }
   }
 
   @media (max-width: 400px) {
-    .agent-box {
-      width: calc(50% - 0.5rem);
-      min-width: 120px;
-      padding: 1rem 0.5rem;
-    }
-
-    .agent-icon {
-      width: 36px;
-      height: 36px;
-      margin-bottom: 0.5rem;
+    .agent-stage {
+      gap: 0.5rem;
+      padding: 1rem 0.25rem;
     }
 
-    .agent-name {
-      font-size: var(--12px);
+    .agent-box {
+      padding: 0.75rem 0.25rem;
+      gap: 0.5rem;
     }
 
-    .agent-framework {
-      font-size: var(--9px);
+    .agent-icon {
+      margin-bottom: 0.25rem;
     }
   }
 </style>

src/components/Intro.Agents.svelte

@@ -274,11 +274,12 @@
 		#range-agent-nop {
 			left: calc(100% - 2rem);
 			top: 1rem;
+			z-index: 1001;
 		}
 
 		#range-oracle-nop {
-			left: 1rem;
-			top: 2.5rem;
+			left: 1.5rem;
+			top: calc(100% - 4rem);
 		}
 
 		.thumb-label p {

src/components/helpers/Range.svelte

@@ -161,7 +161,7 @@ export const agentCopyKey = derived(
 function calculateDistance(agentSpeedup, oracleSpeedup, agentThresh, oracleThresh) {
 	if (agentSpeedup === undefined || oracleSpeedup === undefined) return null;
 
-	const numerator = (agentThresh * agentSpeedup) - (oracleThresh * oracleSpeedup);
+	const numerator = (oracleThresh * agentSpeedup) - (agentThresh * oracleSpeedup);
 	const denominator = Math.sqrt(agentThresh ** 2 + oracleThresh ** 2);
 
 	return numerator / denominator;