From f790c58d97b1fb2c03970718142403a793e81d59 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 9 Mar 2023 08:51:43 +0000
Subject: [PATCH] Update style section to render properly in new layout

---
 .../_components/settings/DesignSection.svelte |  1 -
 .../_components/settings/StyleSection.svelte  | 31 +++++++++----------
 .../_components/settings/componentStyles.js   |  5 ---
 3 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte
index fa1a357f38..444ded7e1f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte
@@ -27,7 +27,6 @@
     <StyleSection
       {style}
       name={style.label}
-      columns={style.columns}
       properties={style.settings}
       {componentInstance}
       {bindings}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte
index e34ea1019a..4bd9ba539b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte
@@ -4,7 +4,6 @@
   import { store } from "builderStore"
 
   export let name
-  export let columns
   export let properties
   export let componentInstance
   export let bindings = []
@@ -34,27 +33,27 @@
 </script>
 
 <DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
-  <div class="group-content" style="grid-template-columns: {columns || '1fr'}">
+  <div class="styles">
     {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
-      <div style="grid-column: {prop.column || 'auto'}">
-        <PropertyControl
-          label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
-          control={prop.control}
-          key={prop.key}
-          value={style[prop.key]}
-          onChange={val => updateStyle(prop.key, val)}
-          props={getControlProps(prop)}
-          {bindings}
-        />
-      </div>
+      <PropertyControl
+        label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
+        control={prop.control}
+        key={prop.key}
+        value={style[prop.key]}
+        onChange={val => updateStyle(prop.key, val)}
+        props={getControlProps(prop)}
+        {bindings}
+      />
     {/each}
   </div>
 </DetailSummary>
 
 <style>
-  .group-content {
-    display: grid;
+  .styles {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
+    gap: 8px;
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js
index d4912241b3..7c65b6e6ec 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js
@@ -3,7 +3,6 @@ import ColorPicker from "components/design/settings/controls/ColorPicker.svelte"
 
 export const margin = {
   label: "Margin",
-  columns: "1fr 1fr",
   settings: [
     {
       label: "Top",
@@ -90,7 +89,6 @@ export const margin = {
 
 export const padding = {
   label: "Padding",
-  columns: "1fr 1fr",
   settings: [
     {
       label: "Top",
@@ -177,7 +175,6 @@ export const padding = {
 
 export const size = {
   label: "Size",
-  columns: "1fr 1fr",
   settings: [
     {
       label: "Width",
@@ -196,7 +193,6 @@ export const size = {
 
 export const background = {
   label: "Background",
-  columns: "auto 1fr",
   settings: [
     {
       label: "Color",
@@ -285,7 +281,6 @@ export const background = {
 
 export const border = {
   label: "Border",
-  columns: "1fr 1fr",
   settings: [
     {
       label: "Color",