From 2d62c6a413015f968853db20a92d93efd8abe5ec Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 29 Apr 2021 09:41:49 +0100
Subject: [PATCH] Add wrapper component to data provider so that it can be
 styled

---
 packages/client/src/utils/styleable.js               | 5 ++++-
 packages/standard-components/src/DataProvider.svelte | 8 +++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 6cc387058a..9a89f1d273 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -24,7 +24,10 @@ const addBuilderPreviewStyles = (node, styleString, componentId) => {
   if (componentId === get(builderStore).selectedComponentId) {
     const style = window.getComputedStyle(node)
     const property = style?.display === "table-row" ? "outline" : "border"
-    return styleString + `;${property}: 2px solid #4285f4 !important;`
+    return (
+      styleString +
+      `;${property}: 2px solid #4285f4 !important; border-radius: 4px !important;`
+    )
   } else {
     return styleString
   }
diff --git a/packages/standard-components/src/DataProvider.svelte b/packages/standard-components/src/DataProvider.svelte
index e7feb804f3..83de1ceb66 100644
--- a/packages/standard-components/src/DataProvider.svelte
+++ b/packages/standard-components/src/DataProvider.svelte
@@ -103,6 +103,8 @@
   }
 </script>
 
-<Provider {actions} data={dataContext}>
-  <slot />
-</Provider>
+<div use:styleable={$component.styles}>
+  <Provider {actions} data={dataContext}>
+    <slot />
+  </Provider>
+</div>