diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte
index 2baa6b466e..c1a3c2f6fc 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte
@@ -1,5 +1,5 @@
 <script>
-  import {buildStyle} from "../helpers.js"
+  import { buildStyle } from "../helpers.js"
   import { fade } from "svelte/transition"
 
   export let backgroundSize = "10px"
@@ -20,5 +20,7 @@
     background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
     height: fit-content;
     width: fit-content;
+    width: -moz-fit-content;
+    height: -moz-fit-content;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
index deb199fde3..254dc1f288 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
@@ -1,267 +1,184 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte"
-  import { fade } from "svelte/transition"
-  import Swatch from "./Swatch.svelte"
-  import CheckedBackground from "./CheckedBackground.svelte"
-  import { buildStyle } from "../helpers.js"
+  import { onMount, createEventDispatcher } from "svelte";
+  import { fade } from "svelte/transition";
+  import Swatch from "./Swatch.svelte";
+  import CheckedBackground from "./CheckedBackground.svelte";
+  import { buildStyle } from "../helpers.js";
   import {
     getColorFormat,
     convertToHSVA,
-    convertHsvaToFormat,
-  } from "../utils.js"
-  import Slider from "./Slider.svelte"
-  import Palette from "./Palette.svelte"
-  import ButtonGroup from "./ButtonGroup.svelte"
-  import Input from "./Input.svelte"
-  import Portal from "./Portal.svelte"
-  import { keyevents } from "../actions"
+    convertHsvaToFormat
+  } from "../utils.js";
+  import Slider from "./Slider.svelte";
+  import Palette from "./Palette.svelte";
+  import ButtonGroup from "./ButtonGroup.svelte";
+  import Input from "./Input.svelte";
+  import Portal from "./Portal.svelte";
+  import { keyevents } from "../actions";
 
-  export let value = "#3ec1d3ff"
-  export let open = false
-  export let swatches = []
+  export let value = "#3ec1d3ff";
+  export let open = false;
+  export let swatches = [];
 
-  export let disableSwatches = false
-  export let format = "hexa"
-  export let style = ""
-  export let pickerHeight = 0
-  export let pickerWidth = 0
+  export let disableSwatches = false;
+  export let format = "hexa";
+  export let style = "";
+  export let pickerHeight = 0;
+  export let pickerWidth = 0;
 
-  let colorPicker = null
-  let adder = null
-  let swatchesSetFromLocalStore = false
+  let colorPicker = null;
+  let adder = null;
+  let swatchesSetFromLocalStore = false;
 
-  let h = 0
-  let s = 0
-  let v = 0
-  let a = 0
+  let h = 0;
+  let s = 0;
+  let v = 0;
+  let a = 0;
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher();
 
   onMount(() => {
     if (!swatches.length > 0) {
       //Don't use locally stored recent colors if swatches have been passed as props
-      swatchesSetFromLocalStore = true
-      swatches = getRecentColors() || []
+      swatchesSetFromLocalStore = true;
+      swatches = getRecentColors() || [];
     }
 
     if (swatches.length > 12) {
       console.warn(
         `Colorpicker - ${swatches.length} swatches were provided. Only the first 12 swatches will be displayed.`
-      )
+      );
     }
 
     if (colorPicker) {
-      colorPicker.focus()
+      colorPicker.focus();
     }
 
     if (format) {
-      convertAndSetHSVA()
+      convertAndSetHSVA();
     }
-  })
+  });
 
   function getRecentColors() {
-    let colorStore = localStorage.getItem("cp:recent-colors")
+    let colorStore = localStorage.getItem("cp:recent-colors");
     if (colorStore) {
-      return JSON.parse(colorStore)
+      return JSON.parse(colorStore);
     }
   }
 
   function handleEscape() {
     if (open) {
-      open = false
+      open = false;
     }
   }
 
   function setRecentColors(color) {
     const s = swatchesSetFromLocalStore
       ? swatches
-      : [...getRecentColors(), color]
-    localStorage.setItem("cp:recent-colors", JSON.stringify(s))
+      : [...getRecentColors(), color];
+    localStorage.setItem("cp:recent-colors", JSON.stringify(s));
   }
 
   function convertAndSetHSVA() {
-    let hsva = convertToHSVA(value, format)
-    setHSVA(hsva)
+    let hsva = convertToHSVA(value, format);
+    setHSVA(hsva);
   }
 
   function setHSVA([hue, sat, val, alpha]) {
-    h = hue
-    s = sat
-    v = val
-    a = alpha
+    h = hue;
+    s = sat;
+    v = val;
+    a = alpha;
   }
 
   //fired by choosing a color from the palette
   function setSaturationAndValue({ detail }) {
-    s = detail.s
-    v = detail.v
-    value = convertHsvaToFormat([h, s, v, a], format)
-    dispatchValue()
+    s = detail.s;
+    v = detail.v;
+    value = convertHsvaToFormat([h, s, v, a], format);
+    dispatchValue();
   }
 
   function setHue({ color, isDrag }) {
-    h = color
-    value = convertHsvaToFormat([h, s, v, a], format)
+    h = color;
+    value = convertHsvaToFormat([h, s, v, a], format);
     if (!isDrag) {
-      dispatchValue()
+      dispatchValue();
     }
   }
 
   function setAlpha({ color, isDrag }) {
-    a = color === "1.00" ? "1" : color
-    value = convertHsvaToFormat([h, s, v, a], format)
+    a = color === "1.00" ? "1" : color;
+    value = convertHsvaToFormat([h, s, v, a], format);
     if (!isDrag) {
-      dispatchValue()
+      dispatchValue();
     }
   }
 
   function dispatchValue() {
-    dispatch("change", value)
+    dispatch("change", value);
   }
 
   function changeFormatAndConvert(f) {
-    format = f
-    value = convertHsvaToFormat([h, s, v, a], format)
+    format = f;
+    value = convertHsvaToFormat([h, s, v, a], format);
   }
 
   function handleColorInput(text) {
-    let format = getColorFormat(text)
+    let format = getColorFormat(text);
     if (format) {
-      value = text
-      convertAndSetHSVA()
+      value = text;
+      convertAndSetHSVA();
     }
   }
 
   function dispatchInputChange() {
     if (format) {
-      dispatchValue()
+      dispatchValue();
     }
   }
 
   function addSwatch() {
     if (format) {
       if (swatches.length === 12) {
-        swatches.splice(0, 1)
+        swatches.splice(0, 1);
       }
 
       if (!swatches.includes(value)) {
-        swatches = [...swatches, value]
-        setRecentColors(value)
+        swatches = [...swatches, value];
+        setRecentColors(value);
       }
 
-      dispatch("addswatch", value)
+      dispatch("addswatch", value);
     }
   }
 
   function removeSwatch(idx) {
-    let removedSwatch = swatches.splice(idx, 1)
-    swatches = swatches
-    dispatch("removeswatch", removedSwatch)
+    let removedSwatch = swatches.splice(idx, 1);
+    swatches = swatches;
+    dispatch("removeswatch", removedSwatch);
     if (swatchesSetFromLocalStore) {
       //as could be a swatch not present in local storage
-      setRecentColors()
+      setRecentColors();
     }
   }
 
   function applySwatch(color) {
     if (value !== color) {
-      format = getColorFormat(color)
+      format = getColorFormat(color);
       if (format) {
-        value = color
-        convertAndSetHSVA()
-        dispatchValue()
+        value = color;
+        convertAndSetHSVA();
+        dispatchValue();
       }
     }
   }
 
-  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
-  $: selectedColorStyle = buildStyle({ background: value, border })
-  $: hasSwatches = swatches.length > 0
-
+  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : "";
+  $: selectedColorStyle = buildStyle({ background: value, border });
+  $: hasSwatches = swatches.length > 0;
 </script>
 
-<Portal>
-  <div
-    class="colorpicker-container"
-    use:keyevents={{ Escape: handleEscape }}
-    transition:fade
-    bind:this={colorPicker}
-    {style}
-    tabindex="0"
-    bind:clientHeight={pickerHeight}
-    bind:clientWidth={pickerWidth}>
-
-    <div class="palette-panel">
-      <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-    </div>
-
-    <div class="control-panel">
-      <div class="alpha-hue-panel">
-        <div>
-          <CheckedBackground borderRadius="50%" backgroundSize="8px">
-            <div
-              class="selected-color"
-              title={value}
-              style={selectedColorStyle} />
-          </CheckedBackground>
-        </div>
-        <div>
-          <Slider
-            type="hue"
-            value={h}
-            on:change={hue => setHue(hue.detail)}
-            on:dragend={dispatchValue} />
-
-          <CheckedBackground borderRadius="10px" backgroundSize="7px">
-            <Slider
-              type="alpha"
-              value={a}
-              on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
-              on:dragend={dispatchValue} />
-          </CheckedBackground>
-
-        </div>
-      </div>
-
-      {#if !disableSwatches}
-        <div transition:fade class="swatch-panel">
-          {#if hasSwatches}
-            {#each swatches as color, idx}
-              {#if idx < 12}
-                <Swatch
-                  {color}
-                  on:click={() => applySwatch(color)}
-                  on:removeswatch={() => removeSwatch(idx)} />
-              {/if}
-            {/each}
-          {/if}
-          {#if swatches.length < 12}
-            <div
-              tabindex="0"
-              use:keyevents={{ Enter: addSwatch }}
-              bind:this={adder}
-              transition:fade
-              class="adder"
-              class:shrink={hasSwatches}
-              on:click={addSwatch}>
-              <span>&plus;</span>
-            </div>
-          {/if}
-        </div>
-      {/if}
-
-      <div class="format-input-panel">
-        <ButtonGroup {format} onclick={changeFormatAndConvert} />
-        <Input
-          {value}
-          on:input={event => handleColorInput(event.target.value)}
-          on:change={dispatchInputChange} />
-      </div>
-    </div>
-
-  </div>
-</Portal>
-
 <style>
   .colorpicker-container {
     position: absolute;
@@ -347,3 +264,86 @@
     padding-top: 3px;
   }
 </style>
+
+<Portal>
+  <div
+    class="colorpicker-container"
+    use:keyevents={{ Escape: handleEscape }}
+    transition:fade
+    bind:this={colorPicker}
+    {style}
+    tabindex="0"
+    bind:clientHeight={pickerHeight}
+    bind:clientWidth={pickerWidth}>
+
+    <div class="palette-panel">
+      <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+    </div>
+
+    <div class="control-panel">
+      <div class="alpha-hue-panel">
+        <div>
+          <CheckedBackground borderRadius="50%" backgroundSize="8px">
+            <div
+              class="selected-color"
+              title={value}
+              style={selectedColorStyle} />
+          </CheckedBackground>
+        </div>
+        <div>
+          <Slider
+            type="hue"
+            value={h}
+            on:change={hue => setHue(hue.detail)}
+            on:dragend={dispatchValue} />
+
+          <CheckedBackground borderRadius="10px" backgroundSize="7px">
+            <Slider
+              type="alpha"
+              value={a}
+              on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
+              on:dragend={dispatchValue} />
+          </CheckedBackground>
+
+        </div>
+      </div>
+
+      {#if !disableSwatches}
+        <div transition:fade class="swatch-panel">
+          {#if hasSwatches}
+            {#each swatches as color, idx}
+              {#if idx < 12}
+                <Swatch
+                  {color}
+                  on:click={() => applySwatch(color)}
+                  on:removeswatch={() => removeSwatch(idx)} />
+              {/if}
+            {/each}
+          {/if}
+          {#if swatches.length < 12}
+            <div
+              tabindex="0"
+              title="Add Swatch"
+              use:keyevents={{ Enter: addSwatch }}
+              bind:this={adder}
+              transition:fade
+              class="adder"
+              class:shrink={hasSwatches}
+              on:click={addSwatch}>
+              <span>&plus;</span>
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+      <div class="format-input-panel">
+        <ButtonGroup {format} onclick={changeFormatAndConvert} />
+        <Input
+          {value}
+          on:input={event => handleColorInput(event.target.value)}
+          on:change={dispatchInputChange} />
+      </div>
+    </div>
+
+  </div>
+</Portal>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
index a28c8d2560..f3ab6f6f22 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
@@ -1,93 +1,141 @@
 <script>
-  import Colorpicker from "./Colorpicker.svelte"
-  import CheckedBackground from "./CheckedBackground.svelte"
-  import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
+  import Colorpicker from "./Colorpicker.svelte";
+  import CheckedBackground from "./CheckedBackground.svelte";
+  import { createEventDispatcher, beforeUpdate, onMount } from "svelte";
 
-  import { buildStyle, debounce } from "../helpers.js"
-  import { fade } from "svelte/transition"
-  import { getColorFormat } from "../utils.js"
+  import { buildStyle, debounce } from "../helpers.js";
+  import { fade } from "svelte/transition";
+  import { getColorFormat } from "../utils.js";
 
-  export let value = "#3ec1d3ff"
-  export let swatches = []
-  export let disableSwatches = false
-  export let open = false
-  export let width = "25px"
-  export let height = "25px"
+  export let value = "#3ec1d3ff";
+  export let swatches = [];
+  export let disableSwatches = false;
+  export let open = false;
+  export let width = "25px";
+  export let height = "25px";
 
-  let format = "hexa"
-  let dimensions = { top: 0, bottom: 0, right: 0, left: 0 }
-  let positionSide = "top"
-  let colorPreview = null
+  let format = "hexa";
+  let dimensions = { top: 0, bottom: 0, right: 0, left: 0 };
+  let positionY = "top";
+  let positionX = "left";
+  let colorPreview = null;
 
-  let previewHeight = null
-  let previewWidth = null
-  let pickerWidth = 0
-  let pickerHeight = 0
+  let previewHeight = null;
+  let previewWidth = null;
+  let pickerWidth = 0;
+  let pickerHeight = 0;
 
-  let errorMsg = null
+  let errorMsg = null;
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher();
 
   beforeUpdate(() => {
-    format = getColorFormat(value)
+    format = getColorFormat(value);
     if (!format) {
-      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
-      console.error(errorMsg)
+      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`;
+      console.error(errorMsg);
     } else {
-      errorMsg = null
+      errorMsg = null;
     }
-  })
+  });
 
   function openColorpicker(event) {
     if (colorPreview) {
-      open = true
+      open = true;
     }
   }
 
   function onColorChange(color) {
-    value = color.detail
-    dispatch("change", color.detail)
+    value = color.detail;
+    dispatch("change", color.detail);
   }
 
   function calculateDimensions() {
-    const {
-      top: spaceAbove,
-      width,
-      bottom,
-      right,
-      left,
-    } = colorPreview.getBoundingClientRect()
+    if (open) {
+      const {
+        top: spaceAbove,
+        width,
+        bottom,
+        right,
+        left
+      } = colorPreview.getBoundingClientRect();
 
-    const spaceBelow = window.innerHeight - bottom
-    const previewCenter = previewWidth / 2
+      const spaceBelow = window.innerHeight - bottom;
+      const previewCenter = previewWidth / 2;
 
-    let y, x
+      let y, x;
 
-    if (spaceAbove > spaceBelow) {
-      positionSide = "bottom"
-      y = window.innerHeight - spaceAbove
-    } else {
-      positionSide = "top"
-      y = bottom
+      if (spaceAbove > spaceBelow) {
+        positionY = "bottom";
+        y = window.innerHeight - spaceAbove;
+      } else {
+        positionY = "top";
+        y = bottom;
+      }
+
+      // Centre picker by default
+      x = left + previewCenter - 220 / 2;
+
+      const spaceRight = window.innerWidth - right;
+
+      //Position picker left or right if space not available for centering
+      if (left < 110 && spaceRight > 220) {
+        positionX = "left";
+        x = right;
+      } else if (spaceRight < 100 && left > 220) {
+        positionX = "right";
+        x = document.body.clientWidth - left;
+      }
+
+      dimensions = { [positionY]: y.toFixed(1), [positionX]: x.toFixed(1) };
     }
-
-    x = left + previewCenter - 220 / 2
-
-    dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
   }
 
   $: if (open && colorPreview) {
-    calculateDimensions()
+    calculateDimensions();
   }
 
-  $: previewStyle = buildStyle({ width, height, background: value })
-  $: errorPreviewStyle = buildStyle({ width, height })
+  $: previewStyle = buildStyle({ width, height, background: value });
+  $: errorPreviewStyle = buildStyle({ width, height });
   $: pickerStyle = buildStyle({
-    [positionSide]: `${dimensions[positionSide]}px`,
-    left: `${dimensions.left}px`,
-  })
+    [positionY]: `${dimensions[positionY]}px`,
+    [positionX]: `${dimensions[positionX]}px`
+  });
 </script>
 
+<style>
+  .color-preview-container {
+    display: flex;
+    flex-flow: row nowrap;
+    height: fit-content;
+  }
+
+  .color-preview {
+    cursor: pointer;
+    border-radius: 3px;
+    border: 1px solid #dedada;
+    position: absolute;
+    left: 110px;
+  }
+
+  .preview-error {
+    background: #cccccc;
+    color: #808080;
+    text-align: center;
+    font-size: 18px;
+    cursor: not-allowed;
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
+</style>
+
 <svelte:window on:resize={debounce(calculateDimensions, 200)} />
 
 <div class="color-preview-container">
@@ -127,41 +175,3 @@
     </div>
   {/if}
 </div>
-
-<style>
-  .color-preview-container {
-    display: flex;
-    flex-flow: row nowrap;
-    height: fit-content;
-  }
-
-  .color-preview {
-    cursor: pointer;
-    border-radius: 3px;
-    border: 1px solid #dedada;
-  }
-
-  .preview-error {
-    background: #cccccc;
-    color: #808080;
-    text-align: center;
-    font-size: 18px;
-    cursor: not-allowed;
-  }
-
-  /* .picker-container {
-    position: absolute;
-    z-index: 3;
-    width: fit-content;
-    height: fit-content;
-  } */
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-  }
-</style>