fixed padding for tool tip display

Author: garrettlchow

src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx

@@ -7,7 +7,7 @@ const ToolTipDataDisplay = ({ data }) => {
   const jsonTheme = {
     scheme: 'custom',
     base00: 'transparent',
-    base0B: '#14b8a6', // Teal for strings
+    base0B: '#ffff', // white for strings
     base0D: '#60a5fa', // Blue for keys
     base09: '#f59e0b', // Orange for numbers
     base0C: '#EF4444', // red for nulls

src/app/styles/layout/_stateContainer.scss

@@ -99,6 +99,19 @@
 }
 
 // tool tip styles
+.tooltip-header {
+  padding: 12px;
+  background-color: #1f2937;
+  border-bottom: 1px solid rgba(107, 114, 128, 0.2);
+}
+
+.tooltip-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: #f9fafb;
+}
+
 .tooltip-container {
   width: 300px;
   background-color: #111827;
@@ -109,11 +122,10 @@
   font-family: 'Outfit', sans-serif;
   color: #f9fafb;
   overflow: hidden;
-  margin: 4px 0;
 }
 
 .tooltip-section {
-  padding: 12px 16px;
+  padding: 12px;
   border-bottom: 1px solid rgba(107, 114, 128, 0.2);
 }
 
@@ -125,7 +137,6 @@
   font-size: 14px;
   font-weight: 500;
   color: #14b8a6;
-  margin-bottom: 8px;
 }
 
 .tooltip-content {
@@ -143,7 +154,6 @@
 }
 
 .tooltip-data {
-  padding-left: 12px;
   border-left: 2px solid rgba(20, 184, 166, 0.4);
 }