Update all setting labels to be correctly cased and sized to fit new layout

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -74,11 +74,15 @@
   })
 </script>
 
-<div class="property-control" class:highlighted={highlighted && nullishValue}>
+<div
+  class="property-control"
+  class:wide={!label}
+  class:highlighted={highlighted && nullishValue}
+>
   {#if label}
     <Label size="M">{label}</Label>
   {/if}
-  <div id={`${key}-prop-control`} class="control" class:wide={!label}>
+  <div id={`${key}-prop-control`} class="control">
     <svelte:component
       this={control}
       {componentInstance}
@@ -107,8 +111,8 @@
     align-items: center;
     transition: background 130ms ease-out, border-color 130ms ease-out;
     border-left: 4px solid transparent;
-    margin: -6px calc(-1 * var(--spacing-xl));
+    margin: 0 calc(-1 * var(--spacing-xl));
-    padding: 2px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px);
+    padding: 0 var(--spacing-xl) 0 calc(var(--spacing-xl) - 4px);
     gap: 8px;
   }
   .property-control :global(.spectrum-FieldLabel) {
@@ -121,13 +125,15 @@
   .control {
     position: relative;
   }
-  .control.wide {
+  .property-control.wide .control {
     grid-column: 1 / -1;
   }
   .text {
-    margin-top: 4px;
     font-size: var(--spectrum-global-dimension-font-size-75);
     color: var(--grey-6);
+    grid-column: 2 / 2;
+  }
+  .property-control.wide .text {
     grid-column: 1 / -1;
   }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte

@@ -117,49 +117,51 @@
 {#each sections as section, idx (section.name)}
   {#if section.visible}
     <DetailSummary name={section.name} collapsible={false}>
-      {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
+      <div class="settings">
-        <PropertyControl
+        {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
-          control={Input}
-          label="Name"
-          key="_instanceName"
-          value={componentInstance._instanceName}
-          onChange={val => updateSetting({ key: "_instanceName" }, val)}
-        />
-      {/if}
-      {#each section.settings as setting (setting.key)}
-        {#if setting.visible}
           <PropertyControl
-            type={setting.type}
+            control={Input}
-            control={getComponentForSetting(setting)}
+            label="Name"
-            label={setting.label}
+            key="_instanceName"
-            key={setting.key}
+            value={componentInstance._instanceName}
-            value={componentInstance[setting.key]}
+            onChange={val => updateSetting({ key: "_instanceName" }, val)}
-            defaultValue={setting.defaultValue}
-            nested={setting.nested}
-            onChange={val => updateSetting(setting, val)}
-            highlighted={$store.highlightedSettingKey === setting.key}
-            info={setting.info}
-            props={{
-              // Generic settings
-              placeholder: setting.placeholder || null,
-
-              // Select settings
-              options: setting.options || [],
-
-              // Number fields
-              min: setting.min ?? null,
-              max: setting.max ?? null,
-            }}
-            {bindings}
-            {componentBindings}
-            {componentInstance}
-            {componentDefinition}
           />
         {/if}
-      {/each}
+        {#each section.settings as setting (setting.key)}
-      {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")}
+          {#if setting.visible}
-        <ResetFieldsButton {componentInstance} />
+            <PropertyControl
-      {/if}
+              type={setting.type}
+              control={getComponentForSetting(setting)}
+              label={setting.label}
+              key={setting.key}
+              value={componentInstance[setting.key]}
+              defaultValue={setting.defaultValue}
+              nested={setting.nested}
+              onChange={val => updateSetting(setting, val)}
+              highlighted={$store.highlightedSettingKey === setting.key}
+              info={setting.info}
+              props={{
+                // Generic settings
+                placeholder: setting.placeholder || null,
+
+                // Select settings
+                options: setting.options || [],
+
+                // Number fields
+                min: setting.min ?? null,
+                max: setting.max ?? null,
+              }}
+              {bindings}
+              {componentBindings}
+              {componentInstance}
+              {componentDefinition}
+            />
+          {/if}
+        {/each}
+        {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")}
+          <ResetFieldsButton {componentInstance} />
+        {/if}
+      </div>
     </DetailSummary>
   {/if}
 {/each}
@@ -168,3 +170,13 @@
     <EjectBlockButton />
   </DetailSummary>
 {/if}
+
+<style>
+  .settings {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 8px;
+  }
+</style>