Further improve code mirror styles and consistency

packages/builder/src/components/common/CodeEditor/CodeEditor.svelte

@@ -433,10 +433,19 @@
     margin-top: -2px;
   }
 
+  /* Wrapper around helpers */
+  .code-editor :global(.info-bubble) {
+    font-size: var(--font-size-s);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    color: var(--spectrum-global-color-gray-800);
+  }
+
   /* Live binding value / helper value */
   .code-editor :global(.binding__description) {
-    color: var(--spectrum-global-color-gray-700);
+    color: var(--spectrum-alias-text-color);
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-m);
   }
   .code-editor :global(.binding__example) {
     padding: 0;
@@ -448,18 +457,12 @@
     overflow: hidden;
     max-height: 480px;
   }
+  .code-editor :global(.binding__example.helper) {
+    color: var(--spectrum-global-color-blue-700);
+  }
   .code-editor :global(.binding__example span) {
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     white-space: nowrap !important;
   }
-
-  /* Wrapper around helpers */
-  .code-editor :global(.info-bubble) {
-    font-size: var(--font-size-s);
-    display: grid;
-    grid-gap: var(--spacing-s);
-    grid-template-columns: 1fr;
-    color: var(--spectrum-global-color-gray-800);
-  }
 </style>

packages/builder/src/components/common/CodeEditor/index.js

@@ -32,17 +32,17 @@ export const buildHelperInfoNode = (completion, helper) => {
   ele.classList.add("info-bubble")
 
   const exampleNodeHtml = helper.example
-    ? `<div class="binding__example">${helper.example}</div>`
+    ? `<div class="binding__example helper">${helper.example}</div>`
     : ""
   const descriptionMarkup = sanitizeHtml(helper.description, {
     allowedTags: [],
     allowedAttributes: {},
   })
-  const descriptionNodeHtml = `<div class="binding__description">${descriptionMarkup}</div>`
+  const descriptionNodeHtml = `<div class="binding__description helper">${descriptionMarkup}</div>`
 
   ele.innerHTML = `
-    ${exampleNodeHtml}
     ${descriptionNodeHtml}
+    ${exampleNodeHtml}
   `
   return ele
 }

packages/builder/src/components/common/bindings/BindingSidePanel.svelte

@@ -75,6 +75,7 @@
     stopHidingPopover()
     popoverAnchor = target
     hoverTarget = {
+      helper: false,
       code: binding.valueHTML,
     }
     popover.show()
@@ -87,6 +88,7 @@
     }
     popoverAnchor = target
     hoverTarget = {
+      helper: true,
       description: helper.description,
       code: getHelperExample(helper, mode.name === "javascript"),
     }
@@ -121,19 +123,17 @@
   on:mouseenter={stopHidingPopover}
   on:mouseleave={hidePopover}
 >
-  <div class="helper">
+  <div class="binding-popover" class:helper={hoverTarget.helper}>
-    <Layout gap="S">
+    {#if hoverTarget.description}
-      {#if hoverTarget.description}
+      <div>
-        <div>
-          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-          {@html hoverTarget.description}
-        </div>
-      {/if}
-      {#if hoverTarget.code}
         <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-        <pre>{@html hoverTarget.code}</pre>
+        {@html hoverTarget.description}
-      {/if}
+      </div>
-    </Layout>
+    {/if}
+    {#if hoverTarget.code}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+      <pre>{@html hoverTarget.code}</pre>
+    {/if}
   </div>
 </Popover>
 
@@ -380,14 +380,19 @@
   .binding__label {
     text-transform: capitalize;
   }
-
   .binding__type {
     font-family: var(--font-mono);
     font-size: 10px;
     color: var(--spectrum-global-color-gray-700);
   }
 
-  .helper pre {
+  .binding-popover {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    padding: var(--spacing-m);
+  }
+  .binding-popover pre {
     padding: 0;
     margin: 0;
     font-size: 12px;
@@ -395,12 +400,15 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
-  .helper pre :global(span) {
+  .binding-popover.helper pre {
+    color: var(--spectrum-global-color-blue-700);
+  }
+  .binding-popover pre :global(span) {
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     white-space: nowrap !important;
   }
-  .helper :global(p) {
+  .binding-popover :global(p) {
     padding: 0;
     margin: 0;
   }