Update style section to render properly in new layout

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}

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
-        <PropertyControl
+        label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
-          label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
+        control={prop.control}
-          control={prop.control}
+        key={prop.key}
-          key={prop.key}
+        value={style[prop.key]}
-          value={style[prop.key]}
+        onChange={val => updateStyle(prop.key, val)}
-          onChange={val => updateStyle(prop.key, val)}
+        props={getControlProps(prop)}
-          props={getControlProps(prop)}
+        {bindings}
-          {bindings}
+      />
-        />
-      </div>
     {/each}
   </div>
 </DetailSummary>
 
 <style>
-  .group-content {
+  .styles {
-    display: grid;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
+    gap: 8px;
   }
 </style>

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",