feat: virtual scrolling for logs view

css/chart.css

@@ -9,6 +9,49 @@
   margin: 0 -24px 24px -24px;
 }
 
+/* Chart section takes its natural size in flex layout */
+.logs-active .chart-section {
+  flex-shrink: 0;
+  z-index: 20;
+}
+
+/* Collapse/expand toggle */
+.chart-collapse-toggle {
+  display: none;
+  width: 100%;
+  height: 24px;
+  border: none;
+  background: var(--chart-bg);
+  border-top: 1px solid var(--border);
+  cursor: pointer;
+  padding: 0;
+  color: var(--text-secondary);
+  font-size: 10px;
+  line-height: 24px;
+  text-align: center;
+  opacity: 0.6;
+  transition: opacity 0.15s ease;
+}
+
+.chart-collapse-toggle:hover {
+  opacity: 1;
+}
+
+.logs-active .chart-collapse-toggle {
+  display: block;
+}
+
+/* Collapsed state */
+.chart-section.chart-collapsed .chart-container {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.2s ease;
+}
+
+.chart-section:not(.chart-collapsed) .chart-container {
+  transition: height 0.2s ease;
+}
+
 @media (max-width: 600px) {
   .chart-section {
     margin: 0 -12px 16px -12px;

css/logs.css

@@ -14,6 +14,36 @@
   display: block;
 }
 
+/* Logs-active: make #dashboard a flex column so header + main fill exactly 100vh */
+#dashboard:has(.logs-active) {
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+#dashboard:has(.logs-active) > header {
+  flex-shrink: 0;
+}
+
+.logs-active#dashboardContent {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Logs View fills remaining flex space */
+.logs-active #logsView.visible {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
 /* Logs View */
 #logsView {
   padding: 16px 0 24px 0;
@@ -25,6 +55,16 @@
   border: 1px solid var(--border);
   overflow-x: auto;
   transition: filter 0.2s ease-out;
+  height: calc(100vh - 200px);
+  min-height: 400px;
+}
+
+/* In logs-active mode, container fills remaining flex space */
+.logs-active .logs-table-container {
+  flex: 1;
+  min-height: 0;
+  height: auto;
+  overflow: auto;
 }
 
 @media (max-width: 600px) {
@@ -44,8 +84,9 @@
 }
 
 .logs-table {
-  width: 100%;
+  min-width: 100%;
   border-collapse: collapse;
+  table-layout: fixed;
   font-size: 12px;
   font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
 }
@@ -59,6 +100,8 @@
   position: sticky;
   top: 0;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   cursor: pointer;
   user-select: none;
 }
@@ -103,7 +146,7 @@
   padding: 8px 12px;
   border-bottom: 1px solid var(--border);
   vertical-align: top;
-  max-width: 300px;
+  max-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -175,6 +218,42 @@
   color: var(--text-secondary);
 }
 
+/* Virtual table loading placeholder rows */
+.logs-table .loading-row td {
+  background: var(--card-bg);
+  color: transparent;
+}
+
+/* Bucket-row table placeholder rows */
+.bucket-table .bucket-row {
+  cursor: default;
+}
+
+.bucket-table .bucket-row .bucket-placeholder {
+  max-width: none;
+  vertical-align: middle;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 11px;
+  border-bottom: 1px solid var(--border);
+  padding: 0 12px;
+  white-space: nowrap;
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent 0px,
+    transparent 28px,
+    rgba(0, 0, 0, 0.02) 28px,
+    rgba(0, 0, 0, 0.02) 56px
+  );
+}
+
+/* Bucket table data rows (loaded on demand) */
+.bucket-table tr[data-row-idx] td {
+  height: 28px;
+  padding: 4px 8px;
+  box-sizing: border-box;
+}
+
 /* Copy feedback toast */
 .copy-feedback {
   position: fixed;

css/modals.css

@@ -365,6 +365,13 @@
   margin-bottom: 12px;
 }
 
+.log-detail-loading {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
 @media (max-width: 600px) {
   #logDetailModal {
     width: 100vw;

dashboard.html

@@ -80,6 +80,7 @@ <h2>Requests over time</h2>
         <div class="chart-container">
           <canvas id="chart"></canvas>
         </div>
+        <button class="chart-collapse-toggle" id="chartCollapseToggle" title="Collapse chart"><span aria-hidden="true">&#9650;</span> Hide chart</button>
       </section>
 
       <!-- Filters View (Breakdowns) -->