scrolling

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte

@@ -18,7 +18,7 @@
 >
   <div class="explanationModalContent">
     {#if subject === subjects.column}
-      <Column {schema} />
+      <Column {columnName} {schema} />
     {:else if subject === subjects.support}
       <Support />
     {:else if subject === subjects.stringsAsNumbers}

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte

@@ -1,11 +1,15 @@
 <script>
-  import { Subject, Property, Section }  from './components'
+  import { Block, Subject, Property, Section }  from './components'
 
   export let schema
+  export let columnName
 </script>
 
 
-<Subject heading="Column Overview">
+<Subject>
+  <div class="heading" slot="heading">
+    Column Overview for <Block>{columnName}</Block>
+  </div>
   <Section>
   {#if schema.type === "string"}
     <Property
@@ -51,3 +55,20 @@
    />
    </Section>
 </Subject>
+
+<style>
+  .heading {
+    display: flex;
+    align-items: center;
+  }
+
+  .heading > :global(.block) {
+    margin-left: 4px;
+    flex-grow: 0;
+    flex-shrink: 1;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte

@@ -30,8 +30,6 @@
   }
 
   $: scalarDescendants = getScalarDescendants(schema)
-  $: console.log(scalarDescendants);
-  $: console.log(schema);
 </script>
 
 <Subject heading="Using Scalar JSON Values">

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte

@@ -1,8 +1,4 @@
-<script>
-  export let truncate = false
-</script>
-
-<span class:truncate class="block">
+<span class="block">
   <slot />
 </span>
 
@@ -15,12 +11,4 @@
     color: var(--ink);
     word-break: break-all;
   }
-
-  .truncate {
-    display: inline-block;
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
 </style>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte

@@ -7,6 +7,10 @@
 <div class="property">
   
 {#if pre}
+<span class="propertyName">
+  {name}
+</span>
+  <span class="propertyDivider">-</span>
 <pre class="pre propertyValue">
 {value}
 </pre>
@@ -27,12 +31,15 @@
   }
   .propertyName {
     font-style: italic;
-
   }
-.pre {
-  padding: 4px;
-  border-radius: 3px;
-  width: 250px;
-  background-color: black;
-}
+
+  .pre {
+    margin: 0;
+    margin-top: 3px;
+    padding: 4px;
+    border-radius: 3px;
+    width: 250px;
+    box-sizing: border-box;
+    background-color: black;
+  }
 </style>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Subject.svelte

@@ -1,5 +1,23 @@
 <script>
+  import { onMount } from "svelte"
+
   export let heading = ""
+  let body;
+
+  const handleScroll = (e) => {
+    console.log("scroll");
+    if (!body) return;
+
+    body.scrollTo({ top: body.scrollTop + e.deltaY, behavior: "smooth" })
+  }
+
+  onMount(() => {
+    window.addEventListener("wheel", handleScroll)
+
+    return () => {
+      window.removeEventListener("wheel", handleScroll)
+    }
+  });
 </script>
 
 <div class="heading">
@@ -10,7 +28,9 @@
   </span>
 </div>
 <div class="divider" />
-<slot />
+<div bind:this={body} class="body">
+  <slot />
+</div>
 
 <style>
   .heading {
@@ -24,4 +44,9 @@
     border-bottom: 1px solid var(--grey-4);
     margin: 12px 0 12px;
   }
+
+  .body {
+    max-height: 300px;
+    overflow-y: auto;
+  }
 </style>

packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte

@@ -31,17 +31,12 @@
     explanationModalSubject = option;
     root = root
   }
-
-  $: {
-    console.log(messages);
-  }
 </script>
 
 <div
   bind:this={root}
   class="tooltipContents"
 >
-
   <Column
     {columnName}
     {columnIcon}