some line refactor

packages/bbui/src/Tooltip/Context.svelte

@@ -157,8 +157,6 @@
 
     border-radius: 5px;
     box-sizing: border-box;
-    opacity: 0;
-    overflow: hidden;
     border: 1px solid var(--grey-4);
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;

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

@@ -35,16 +35,16 @@
   }
 </script>
 
-<Line>
+<Line noWrap>
   <InfoWord
     on:mouseenter={() => setExplanationSubject(subjects.column)}
     on:mouseleave={() => setExplanationSubject(subjects.none)}
     href={tableHref}
     text={columnName}
   />
-  <Space />
+  <Text
-  <Text>is a</Text>
+    value=" is a "
-  <Space />
+  />
   <DocumentationLink
     href={getDocLink(columnType)}
     icon={columnIcon}

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

@@ -6,10 +6,14 @@
 </script>
 
 
-<Line wrap>
+<Line>
-  <Text>
+  <Text
-    JSON Objects cannot be used, but scalar child values can be if their types are supported
+    value="JSON Objects cannot be used, but scalar"
-  </Text><Period />
+  />
+  <Text
+    value=" child values can be if their individual types are supported"
+  />
+  <Period />
 </Line>
 
 <style>

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

@@ -7,8 +7,7 @@
 
 
 <Line>
-  <Text>No</Text>
+  <Text value="No " />
-  <Space />
   <InfoWord
   on:mouseenter={() => setExplanationSubject(subjects.notRequired)}
   on:mouseleave={() => setExplanationSubject(subjects.none)}
@@ -20,11 +19,7 @@
     href="https://docs.budibase.com/docs/budibasedb#constraints"
     text="Constraint"
   />
-  <Comma />
+  <Text value=", so values may be missing." />
-  <Text>
-    so values may be missing
-  </Text>
-  <Period />
 </Line>
 
 <style>

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

@@ -6,14 +6,11 @@
 </script>
 
 <Line>
-  <Text>Any</Text>
+  <Text value="Any " />
-  <Space />
   <InfoWord
       on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
       on:mouseleave={() => setExplanationSubject(subjects.none)}
     text="non-number values"
   />
-  <Space />
+  <Text value=" will be ignored." />
-  <Text>will be ignored</Text>
-  <Period />
 </Line>

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

@@ -49,9 +49,7 @@
     {color}
     {text}
   />
-  <Space />
+  <Text value=" with " />
-  <Text>with</Text>
-  <Space />
   <DocumentationLink
     href="https://docs.budibase.com/docs/chart"
     icon="GraphPie"

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

@@ -5,8 +5,9 @@
     color: var(--grey-6);
     font-size: 17px;
     display: inline block;
-    margin-right: 5px;
     line-height: 26px;
     margin-left: 2px;
+    margin-right: 2px;
+    flex-shrink: 0;
   }
 </style>

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

@@ -51,16 +51,17 @@
 
 <style>
   .infoWord {
+    vertical-align: bottom;
     display: inline-flex;
     box-sizing: border-box;
     padding: 3px 6px;
     border-radius: 5px;
-    vertical-align: sub;
     filter: brightness(100%);
     background-color: var(--grey-3);
     border: 1px solid var(--grey-3);
     overflow: hidden;
-    transition: filter 300ms
+    transition: filter 300ms;
+    align-items: center;
   }
 
   .infoWord:hover {

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

@@ -1,9 +1,9 @@
 <script>
-  export let wrap = false
+  export let noWrap = false
 </script>
 <div class="line">
   <span class="bullet">•</span>
-  <div class="content" class:wrap>
+  <div class="content" class:noWrap>
     <slot />
   </div>
 </div>
@@ -27,12 +27,14 @@
   }
 
   .content {
-    display: flex;
     min-width: 0;
     align-items: center;
+    display: flex;
+    flex-wrap: wrap;
   }
 
-  .wrap {
+  .noWrap {
-    display: block;
+    display: flex;
+    flex-wrap: nowrap;
   }
 </style>

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

@@ -7,5 +7,6 @@
     display: inline block;
     line-height: 26px;
     margin-left: 2px;
+    flex-shrink: 0;
   }
 </style>

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

@@ -1,8 +1,10 @@
-<span class="space" />
+<span class="space">{" "}</span>
 
 <style>
   .space {
-    margin-right: 5px;
+    white-space: pre;
     line-height: 26px;
+    width: 5px;
+    flex-shrink: 0;
   }
 </style>

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

@@ -1,8 +1,76 @@
+<script>
+  import Comma from "./Comma.svelte";
+  import Period from "./Period.svelte";
+  import Space from "./Space.svelte";
+
+  export let value = null
+
+  const punctuation = [" ", ",", "."]
+
+  const getWords = (value) => {
+    if (typeof value !== "string") {
+      return [];
+    }
+
+    const newWords = [];
+    let lastIndex = 0;
+
+    const makeWord = (i) => {
+      // No word to make, multiple spaces, spaces at start of text etc
+      if (i - lastIndex > 0) {
+        newWords.push(value.substring(lastIndex, i));
+      }
+
+      lastIndex = i + 1;
+    }
+
+    value.split("").forEach((character, i) => {
+      if (punctuation.includes(character)) {
+        makeWord(i);
+        newWords.push(character);
+      }
+    })
+
+    makeWord(value.length);
+
+    return newWords;
+  }
+
+  $: words = getWords(value)
+  $: console.log(words);
+</script>
+
+{#if words.length}
+  {#each words as word}
+    {#if word === " "}
+      <Space />
+    {:else if word === ","}
+      <Comma />
+    {:else if word === "."}
+      <Period />
+    {:else}
+      <span class="text">
+        {word}
+      </span>
+    {/if}
+  {/each}
+{:else}
   <span class="text"><slot /></span>
+{/if}
 
 <style>
   .text {
     flex-shrink: 0;
     line-height: 26px;
+    vertical-align: middle;
+  }
+
+  .space {
+    margin-right: 5px;
+  }
+
+  .punctuation {
+    color: red;
+    font-size: 20px;
   }
 </style>