Alternative Logs Table Approach

css/chart.css

@@ -9,6 +9,55 @@
   margin: 0 -24px 24px -24px;
 }
 
+/* Sticky chart when logs view is active (not collapsed) */
+.logs-active:not(.logs-collapsed) .chart-section {
+  position: sticky;
+  top: var(--header-height);
+  z-index: 20;
+}
+
+/* When collapsed, nothing is sticky - normal scroll behavior */
+.logs-active.logs-collapsed .chart-section {
+  position: relative;
+}
+
+/* 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;
@@ -106,6 +155,37 @@
   opacity: 0.6;
 }
 
+/* Scrubber active state (row hover) */
+.chart-scrubber-line.active {
+  background: var(--primary);
+  opacity: 0.8;
+}
+
+/* Scrubber waiting state (chart hover, waiting to scroll) */
+.chart-scrubber-line.waiting {
+  background: var(--primary);
+  opacity: 0.5;
+  animation: scrubber-pulse 1s ease-in-out;
+}
+
+/* Scrubber loading state (fetching gap data) */
+.chart-scrubber-line.loading {
+  background: var(--primary);
+  opacity: 0.8;
+  animation: scrubber-blink 0.3s ease-in-out infinite;
+}
+
+@keyframes scrubber-pulse {
+  0% { opacity: 0.3; }
+  50% { opacity: 0.7; }
+  100% { opacity: 0.5; }
+}
+
+@keyframes scrubber-blink {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.9; }
+}
+
 .chart-scrubber-status {
   position: absolute;
   bottom: 0;

css/layout.css

@@ -34,6 +34,18 @@ body.header-fixed main {
   padding-top: 70px;
 }
 
+/* Sticky header when logs view is active (not collapsed) */
+#dashboard:has(.logs-active:not(.logs-collapsed)) header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+}
+
+/* When collapsed, header is not sticky */
+#dashboard:has(.logs-active.logs-collapsed) header {
+  position: relative;
+}
+
 @media (max-width: 600px) {
   header {
     padding: 12px;

css/logs.css

@@ -58,6 +58,7 @@
   border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
+  z-index: 10;
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
@@ -175,6 +176,86 @@
   color: var(--text-secondary);
 }
 
+/* Gap rows — unloaded time ranges between log islands */
+.logs-gap-row {
+  cursor: default;
+  height: 33px; /* Match regular row height */
+  max-height: 33px;
+}
+
+.logs-gap-row td {
+  border-bottom: 1px solid var(--border);
+  background: var(--card-bg); /* Match table background */
+}
+
+.logs-table tr.logs-gap-row:hover td {
+  background: var(--card-bg);
+}
+
+.logs-gap-cell {
+  text-align: left;
+  padding: 8px 12px;
+  height: 17px; /* Content height only, padding adds to 33px total */
+  line-height: 17px;
+  box-sizing: content-box;
+  overflow: hidden;
+  overflow-y: clip;
+}
+
+.logs-gap-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+  cursor: pointer;
+  transition: color 0.15s;
+  height: 17px; /* Fixed height to prevent layout shift */
+  line-height: 17px;
+  /* Keep button visible when table is wider than viewport */
+  position: sticky;
+  left: 12px;
+}
+
+.logs-gap-button:hover {
+  color: var(--primary);
+}
+
+.logs-gap-row.loading {
+  display: table-row; /* Override base.css .loading display:flex */
+  padding: 0; /* Override base.css .loading padding:40px */
+}
+
+.logs-gap-row.loading .logs-gap-button {
+  cursor: wait;
+}
+
+.logs-gap-icon {
+  font-size: 14px;
+  line-height: 1;
+  width: 14px;
+  text-align: center;
+}
+
+.logs-gap-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid var(--text-secondary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: gap-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes gap-spin {
+  to { transform: rotate(360deg); }
+}
+
 /* 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;

css/variables.css

@@ -4,6 +4,10 @@
  */
 
 :root {
+  /* Sticky layout heights for logs view */
+  --header-height: 69px;
+  --chart-height: 250px;
+  --chart-toggle-height: 24px;
   --primary: #eb1000;
   --primary-dark: #c40d00;
   --bg: #f9fafb;

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) -->