Fix helper menu issues and align with the design. (#4261)

src/assets/css/style.css

@@ -27,6 +27,11 @@
   --content-fg: #000;
   --content-hover-bg: #adadad;
   --content-hover-fg: #000;
+  
+  /* Code styling colors for help menu*/
+  --code-text-color: rgba(0, 122, 255, 1);
+  --code-bg-color: rgba(96, 165, 250, 0.2);
+  --code-block-bg-color: rgba(60, 60, 60, 0.12);
 }
 
 @media (prefers-color-scheme: dark) {

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

@@ -12,7 +12,7 @@
       />
       <span class="ml-2 font-semibold">{{ node.display_name }}</span>
     </div>
-    <div class="p-4 flex-grow node-help-content max-w-[600px] mx-auto">
+    <div class="p-4 flex-grow node-help-content w-full mx-auto">
       <ProgressSpinner
         v-if="isLoading"
         class="m-auto"
@@ -188,7 +188,7 @@ const outputList = computed(() =>
 
 .markdown-content :deep(li),
 .fallback-content li {
-  @apply my-1;
+  @apply my-2;
 }
 
 .markdown-content :deep(*:first-child),
@@ -198,7 +198,9 @@ const outputList = computed(() =>
 
 .markdown-content :deep(code),
 .fallback-content code {
-  @apply text-[var(--error-text)] bg-[var(--content-bg)] rounded px-1 py-0.5;
+  color: var(--code-text-color);
+  background-color: var(--code-bg-color);
+  @apply rounded px-1.5 py-0.5;
 }
 
 .markdown-content :deep(table),
@@ -227,4 +229,15 @@ const outputList = computed(() =>
 .fallback-content thead {
   border-bottom: 1px solid var(--p-text-color);
 }
+
+.markdown-content :deep(pre),
+.fallback-content pre {
+  @apply rounded p-4 my-4 overflow-x-auto;
+  background-color: var(--code-block-bg-color);
+
+  code {
+    @apply bg-transparent p-0;
+    color: var(--p-text-color);
+  }
+}
 </style>