fix: improve mobile responsiveness for leaderboard website

- Remove inline styles from HTML that were overriding CSS media queries
  (explorer-body, explorer-nav, explorer-main, two-col layout, selects)
- Move inline styles to proper CSS classes (two-col, two-col-about,
  two-col-main, stats-row-2col, explorer-body, explorer-nav, explorer-main)
- Fix explorer section not stacking vertically on mobile due to inline
  flex-direction:row and height:540px overriding the media query
- Fix two-col layout not collapsing on tablet (the leaderboard wrapper
  div was not targeted by the old .two-col > .card selector)
- Add comprehensive mobile styles at 600px breakpoint:
  - Smaller header/title fonts
  - Reduced container padding
  - Smaller card padding
  - Full-width search input and select controls
  - Stacked table controls layout
  - Smaller table font-size and cell padding
  - Compact buttons, code blocks, and query text
- Add extra-small screen (400px) breakpoint for single-column stats
- Add smooth scroll touch support for horizontally-scrolling tables
- Bump CSS cache version to v5

Co-authored-by: Shreya Shankar <shreyashankar@berkeley.edu>

Author: cursoragent

docs/index.html

@@ -14,7 +14,7 @@
       href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="./styles.css?v=4" />
+    <link rel="stylesheet" href="./styles.css?v=5" />
   </head>
   <body>
     <header class="page-header">
@@ -36,8 +36,8 @@ <h1>DAB: Data Agent Benchmark</h1>
 
     <main class="container">
 
-      <div class="two-col" style="display:flex;gap:1rem;align-items:flex-start">
-        <section class="card" style="flex:1 1 0;min-width:0">
+      <div class="two-col">
+        <section class="card two-col-about">
           <h2>What is the Data Agent Benchmark?</h2>
           <p>
             Users across enterprises increasingly rely on AI agents to query their data
@@ -51,7 +51,7 @@ <h2>What is the Data Agent Benchmark?</h2>
             12 real-world datasets across 9 domains and 4 database systems (PostgreSQL,
             MongoDB, SQLite, DuckDB).
           </p>
-          <div class="stats-row" style="grid-template-columns:repeat(2,1fr)">
+          <div class="stats-row stats-row-2col">
             <div class="stat-box">
               <p class="stat-label">Datasets</p>
               <p class="stat-value">12</p>
@@ -102,7 +102,7 @@ <h2>Submit to the Leaderboard</h2>
           </p>
         </section>
 
-        <div style="flex:3 1 0;min-width:0;display:flex;flex-direction:column;gap:1rem">
+        <div class="two-col-main">
         <section class="card">
           <h2>Leaderboard</h2>
           <p class="muted">
@@ -132,17 +132,15 @@ <h2>Per-Dataset Pass@1</h2>
           <p class="muted">Sort by agent to compare dataset difficulty.</p>
           <div class="table-controls">
             <label for="agent-selector">Sort by agent</label>
-            <div class="sel" style="position:relative;display:inline-flex;align-items:center">
-              <select id="agent-selector" style="appearance:none;-webkit-appearance:none;border:1px solid #8dacc6;background:#fff;border-radius:4px;padding:0.42rem 2.2rem 0.42rem 0.65rem;font:inherit;font-size:0.88rem;color:#0f2033;cursor:pointer;min-width:200px"></select>
-              <span style="position:absolute;right:0.7rem;top:50%;translate:0 -50%;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #3a5f82;pointer-events:none"></span>
+            <div class="sel">
+              <select id="agent-selector"></select>
             </div>
             <label for="agent-order">Order</label>
-            <div class="sel" style="position:relative;display:inline-flex;align-items:center">
-              <select id="agent-order" style="appearance:none;-webkit-appearance:none;border:1px solid #8dacc6;background:#fff;border-radius:4px;padding:0.42rem 2.2rem 0.42rem 0.65rem;font:inherit;font-size:0.88rem;color:#0f2033;cursor:pointer;min-width:130px">
+            <div class="sel">
+              <select id="agent-order">
                 <option value="desc">High to low</option>
                 <option value="asc">Low to high</option>
               </select>
-              <span style="position:absolute;right:0.7rem;top:50%;translate:0 -50%;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #3a5f82;pointer-events:none"></span>
             </div>
           </div>
           <div class="table-wrap">
@@ -163,11 +161,11 @@ <h2>Benchmark Queries</h2>
             <input id="query-search" type="search" placeholder="Search queries…" />
           </div>
         </div>
-        <div class="explorer-body" style="display:flex;flex-direction:row;height:540px;overflow:hidden">
-          <nav class="explorer-nav" style="width:210px;min-width:210px;flex-shrink:0;border-right:1px solid #c2d3e5;overflow-y:auto;background:#f2f7fc">
+        <div class="explorer-body">
+          <nav class="explorer-nav">
             <div id="dataset-list" class="ds-list"></div>
           </nav>
-          <div class="explorer-main" style="flex:1;min-width:0;overflow-y:auto;padding:0.85rem 1rem">
+          <div class="explorer-main">
             <div id="dataset-meta"></div>
             <p class="q-count" id="query-count"></p>
             <div id="query-list" class="q-list"></div>

docs/styles.css

@@ -1,4 +1,4 @@
-/* DAB styles v4 — 2026-03-21 */
+/* DAB styles v5 — 2026-03-21 */
 /* ── Variables ───────────────────────────────────────── */
 :root {
   --navy: #002145;
@@ -37,6 +37,27 @@ h3 { margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 700; color: var(--blue
 .container { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }
 .muted { color: var(--muted); }
 
+.two-col {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.two-col-about {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.two-col-main {
+  flex: 3 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.stats-row-2col { grid-template-columns: repeat(2, 1fr); }
+
 /* ── Header ──────────────────────────────────────────── */
 .page-header {
   background: linear-gradient(140deg, var(--navy), var(--blue));
@@ -131,7 +152,7 @@ ul.about-list li {
 }
 
 /* ── Tables ──────────────────────────────────────────── */
-.table-wrap { overflow-x: auto; }
+.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
 
 table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
 
@@ -275,13 +296,15 @@ pre.code-block code {
 */
 .explorer-body {
   display: flex;
+  flex-direction: row;
   height: 540px;
   overflow: hidden;
 }
 
 .explorer-nav {
-  width: 200px;
-  min-width: 200px;
+  width: 210px;
+  min-width: 210px;
+  flex-shrink: 0;
   border-right: 1px solid var(--border);
   overflow-y: auto;
   background: #f2f7fc;
@@ -459,15 +482,50 @@ pre.code-block code {
 /* ── Responsive ──────────────────────────────────────── */
 @media (max-width: 960px) {
   .hero-grid { flex-direction: column; }
-  .two-col { flex-direction: column !important; }
-  .two-col > .card { flex: unset !important; width: 100% !important; }
+  .two-col { flex-direction: column; }
+  .two-col-about { flex: unset; width: 100%; }
+  .two-col-main { flex: unset; width: 100%; }
   .stats-row { grid-template-columns: repeat(2, 1fr); }
 }
 
 @media (max-width: 600px) {
-  .explorer-body { flex-direction: column; height: auto; }
-  .explorer-nav { width: 100%; min-width: unset; border-right: none; border-bottom: 1px solid var(--border); height: 160px; }
+  .page-header { padding: 1.2rem 0; }
+  .page-header h1 { font-size: 1.35rem; }
+  .subtitle { font-size: 0.9rem; }
+  .container { padding: 0 0.75rem; }
+  h2 { font-size: 0.98rem; }
+  .card { padding: 0.85rem 0.9rem; }
+  .explorer-body { flex-direction: column; height: auto; overflow: visible; }
+  .explorer-nav {
+    width: 100%;
+    min-width: unset;
+    flex-shrink: unset;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    height: 160px;
+  }
   .explorer-main { height: auto; overflow-y: unset; }
+  .explorer-bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.65rem 0.9rem; }
+  .explorer-bar .search-wrap { margin-left: 0; width: 100%; }
+  .explorer-bar .search-wrap input { width: 100%; }
   .ds-meta-grid { grid-template-columns: repeat(2, 1fr); }
   .stats-row { grid-template-columns: repeat(2, 1fr); }
+  .table-controls { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
+  .table-controls label { margin-top: 0.15rem; }
+  .sel select { min-width: unset; width: 100%; }
+  .sel { width: 100%; }
+  table { font-size: 0.8rem; }
+  th, td { padding: 0.38rem 0.45rem; }
+  .hero-actions { justify-content: flex-start; }
+  .btn { padding: 0.45rem 0.75rem; font-size: 0.82rem; }
+  pre.code-block { font-size: 0.76rem; padding: 0.6rem; }
+  .q-text-inline { font-size: 0.82rem; }
+  .ds-link { font-size: 0.76rem; padding: 0.18rem 0.38rem; }
+}
+
+@media (max-width: 400px) {
+  .page-header h1 { font-size: 1.15rem; }
+  .stats-row-2col { grid-template-columns: 1fr; }
+  .ds-meta-grid { grid-template-columns: 1fr; }
+  .stat-value { font-size: 1.3rem; }
 }