Make leaderboard scrollable

index.html

@@ -71,18 +71,6 @@
                         <p>Select Open or Closed in the Availability column to show models.</p>
                     </div>
                 </div>
-                <div class="table-card">
-                    <div class="table-scroll">
-                        <table id="leaderboard-table">
-                            <thead></thead>
-                            <tbody></tbody>
-                        </table>
-                    </div>
-                    <div class="empty-state" id="empty-state" hidden>
-                        <h3>No matching models</h3>
-                        <p>Select Open or Closed in the Availability column to show models.</p>
-                    </div>
-                </div>
                 <section class="comparison-chart" aria-labelledby="comparison-chart-title">
                     <div class="comparison-chart-heading">
                         <div>

style.css

@@ -464,7 +464,10 @@ fieldset {
   box-shadow: 0 10px 32px rgba(35, 40, 48, 0.05);
 }
 .table-scroll {
-  overflow-x: auto;
+  /* Header (37px) plus fifteen 37px leaderboard rows. */
+  max-height: 592px;
+  overflow: auto;
+  scrollbar-gutter: stable;
 }
 table {
   width: 100%;
@@ -1543,4 +1546,4 @@ html[data-theme="dark"] .comparison-availability-dot.closed {
   display: flex;
   align-items: center;
   margin-left: auto;
-}
+}