fix: fixed centering for jumptonode from warningSidebar

ref: N25B-450

src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css

@@ -40,6 +40,7 @@
 
 .warning-group-header {
     background: ButtonFace;
+    padding: 4px;
 }
 
 .warnings-list {
@@ -53,9 +54,10 @@
 
 .warning-item {
     display: flex;
+    flex-direction: column;
     margin: 5px;
-    gap: 8px;
-    padding: 8px 12px;
+    gap: 2px;
+    padding: 0;
     border-radius: 5px;
     cursor: pointer;
 }
@@ -66,17 +68,61 @@
 
 .warning-item--error {
     border: 2px solid red;
+    background-color: hsl(from red h s 96%);
+    .item-header{
+        background-color: red;
+        .type{
+            color: hsl(from red h s 96%);
+        }
+    }
+
+}
+
+.warning-item--error:hover {
+    background-color: hsl(from red h s 75%);
 }
 
 .warning-item--warning {
-    border: 3px solid orange;
+    border: 2px solid orange;
+    background-color: hsl(from orange h s 96%);
+    .item-header{
+        background-color: orange;
+        .type{
+            color: hsl(from orange h s 96%);
+        }
+    }
+}
+
+.warning-item--warning:hover {
+    background-color: hsl(from orange h s 75%);
 }
 
 .warning-item--info {
-    border: 3px solid steelblue;
+    border: 2px solid steelblue;
+    background-color: hsl(from steelblue h s 96%);
+    .item-header{
+        background-color: steelblue;
+        .type{
+            color: hsl(from steelblue h s 96%);
+        }
+    }
 }
 
-.warning-item .meta {
-    font-size: 11px;
-    opacity: 0.6;
+.warning-item--info:hover {
+    background-color: hsl(from steelblue h s 75%);
+}
+
+.warning-item .item-header {
+    padding: 8px 8px;
+    opacity: 1;
+    font-weight: bolder;
+}
+.warning-item .item-header .type{
+    padding: 2px 8px;
+    font-size: 0.9rem;
+}
+
+.warning-item .description {
+    padding: 5px 10px;
+    font-size: 0.8rem;
 }