less laggy

styles.css

@@ -90,17 +90,67 @@ select {
   font-variant-numeric: tabular-nums;
 }
 
-#stateGraph {
-  display: block;
-  width: 100%;
-  flex: 1;
-  min-height: 420px;
+.history-controls,
+.history-group-controls {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.history-controls {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.history-controls select,
+.history-group-controls button {
+  min-width: 0;
   border: 1px solid var(--line);
   border-radius: 6px;
   background: #101315;
+  color: var(--text);
+  font-size: 11px;
+  height: 28px;
+}
+
+.history-group-controls {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.history-group-controls button[aria-pressed="false"] {
+  color: var(--muted);
+  background: #171b1d;
+}
+
+#stateGraph {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 0;
+  background: #101315;
   image-rendering: auto;
 }
 
+.state-graph-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #101315;
+}
+
+.state-graph-info {
+  min-height: 18px;
+  margin-top: 7px;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .brand h1 {
   margin: 0 0 6px;
   font-size: 24px;
@@ -330,7 +380,7 @@ canvas#world {
   .history-sidebar {
     border-left: 0;
     border-top: 1px solid var(--line);
-    overflow: visible;
+    overflow: hidden;
   }
 
   .sim {
@@ -343,7 +393,7 @@ canvas#world {
     height: min(calc(100vw - 20px), 92vh);
   }
 
-  #stateGraph {
+  .state-graph-scroll {
     height: 420px;
     flex: none;
   }