added scroll bar for history nodes

Author: garrettlchow

src/app/components/StateRoute/History.tsx

@@ -212,7 +212,7 @@ function History(props: Record<string, unknown>): JSX.Element {
     // Add rectangles for nodes with consistent size
     node
       .append('rect')
-      .attr('width', 250)
+      .attr('width', 200)
       .attr('height', 120)
       .attr('x', -90)
       .attr('y', -40)
@@ -222,7 +222,7 @@ function History(props: Record<string, unknown>): JSX.Element {
     // Add snapshot titles
     node
       .append('text')
-      .attr('dy', '-25')
+      .attr('dy', '-20')
       .attr('text-anchor', 'middle')
       .attr('class', 'snapshot-title')
       .text((d) => `Snapshot ${d.data.index + 1}`);
@@ -232,11 +232,12 @@ function History(props: Record<string, unknown>): JSX.Element {
       .append('foreignObject')
       .attr('x', -85)
       .attr('y', -15)
-      .attr('width', 250)
-      .attr('height', 200)
+      .attr('width', 170)
+      .attr('height', 90)
       .append('xhtml:div')
       .style('font-size', '12px')
       .style('text-align', 'left')
+      .style('padding-left', '12px')
       .html((d) => findDiff(d.data.index));
 
     return svg.node();

src/app/styles/components/d3graph.css

@@ -38,6 +38,7 @@
   stroke: #14b8a6;
   stroke-width: 2px;
 }
+
 .node--internal text {
   font-family: 'Outfit', sans-serif;
   font-size: 14px;
@@ -95,3 +96,32 @@ div.tooltip {
   overflow: auto; /* Enable scrolling */
   position: relative; /* Create new stacking context */
 }
+
+/* State changes text container styling */
+.node foreignObject div {
+  max-height: 100%; /* Fixed height for scroll container */
+  overflow-y: scroll;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  padding-right: 6px;
+  scrollbar-color: #cbd5e1 #f1f5f9;
+}
+
+/* Custom scrollbar styling for Webkit browsers */
+.node foreignObject div::-webkit-scrollbar {
+  width: 6px;
+}
+
+.node foreignObject div::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 3px;
+}
+
+.node foreignObject div::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+.node foreignObject div::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}

src/app/styles/components/diff.css

@@ -15,12 +15,12 @@
 }
 ul.jsondiffpatch-delta {
   list-style-type: none;
-  padding: 0 0 0 12px;
+  padding: 0;
   margin: 0;
 }
 .jsondiffpatch-delta ul {
   list-style-type: none;
-  padding: 0 0 0 12px;
+  padding: 0;
   margin: 0;
 }