Update front end column structure layout and width to increase preview space

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -20,7 +20,7 @@
   $: componentPropDefinition =
     flattenedPanel.find(
       //use for getting controls for each component property
-      c => c._component === componentInstance._component
+      (c) => c._component === componentInstance._component
     ) || {}
 
   $: panelDefinition =
@@ -48,8 +48,8 @@
 
   function flattenComponents(props) {
     const components = []
-    props.forEach(comp =>
-      walkProps(comp, c => {
+    props.forEach((comp) =>
+      walkProps(comp, (c) => {
         if ("_component" in c) {
           components.push(c)
         }
@@ -63,41 +63,31 @@
   }
 </script>
 
-<div class="root">
-  <CategoryTab
-    onClick={category => (selectedCategory = category)}
-    {categories}
-    {selectedCategory} />
+<CategoryTab
+  onClick={(category) => (selectedCategory = category)}
+  {categories}
+  {selectedCategory} />
 
-  {#if displayName}
-    <div class="instance-name">{componentInstance._instanceName}</div>
+{#if displayName}
+  <div class="instance-name">{componentInstance._instanceName}</div>
+{/if}
+
+<div class="component-props-container">
+  {#if selectedCategory.value === 'design'}
+    <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
+  {:else if selectedCategory.value === 'settings'}
+    <SettingsView
+      {componentInstance}
+      {componentDefinition}
+      {panelDefinition}
+      displayNameField={displayName}
+      onChange={store.setComponentProp}
+      onScreenPropChange={store.setPageOrScreenProp}
+      screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
   {/if}
-
-  <div class="component-props-container">
-    {#if selectedCategory.value === 'design'}
-      <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
-    {:else if selectedCategory.value === 'settings'}
-      <SettingsView
-        {componentInstance}
-        {componentDefinition}
-        {panelDefinition}
-        displayNameField={displayName}
-        onChange={store.setComponentProp}
-        onScreenPropChange={store.setPageOrScreenProp}
-        screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
-    {/if}
-  </div>
 </div>
 
 <style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-    box-sizing: border-box;
-  }
-
   .title > div:nth-child(1) {
     grid-column-start: name;
     color: var(--ink);
@@ -108,7 +98,6 @@
   }
 
   .component-props-container {
-    margin-top: 16px;
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
@@ -118,7 +107,6 @@
   }
 
   .instance-name {
-    margin-top: 20px;
     font-size: 14px;
     font-weight: 500;
     color: var(--grey-7);

packages/builder/src/components/userInterface/DesignView.svelte

@@ -12,7 +12,7 @@
   let propGroup = null
   let currentGroup
 
-  const getProperties = name => panelDefinition[name]
+  const getProperties = (name) => panelDefinition[name]
 
   function onChange(category) {
     selectedCategory = category
@@ -61,10 +61,10 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
+    gap: var(--spacing-m);
   }
 
   .design-view-state-categories {
-    flex: 0 0 50px;
   }
 
   .positioned-wrapper {

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -78,7 +78,7 @@
   }
 
   //Incase the component has a different value key name
-  const handlevalueKey = value =>
+  const handlevalueKey = (value) =>
     props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
 </script>
 
@@ -89,8 +89,8 @@
       this={control}
       {componentInstance}
       {...handlevalueKey(value)}
-      on:change={val => handleChange(key, val)}
-      onChange={val => handleChange(key, val)}
+      on:change={(val) => handleChange(key, val)}
+      onChange={(val) => handleChange(key, val)}
       {...props}
       name={key} />
   </div>
@@ -109,7 +109,7 @@
     <BindingDropdown
       {...handlevalueKey(value)}
       close={dropdown.hide}
-      on:update={e => (temporaryBindableValue = e.detail)}
+      on:update={(e) => (temporaryBindableValue = e.detail)}
       {bindableProperties} />
   </DropdownMenu>
 {/if}
@@ -119,16 +119,14 @@
     position: relative;
     display: flex;
     flex-flow: row;
-    margin: 8px 0;
     align-items: center;
   }
-
   .label {
     display: flex;
     align-items: center;
     font-size: 12px;
     font-weight: 400;
-    flex: 0 0 100px;
+    flex: 0 0 80px;
     text-align: left;
     color: var(--ink);
     margin-right: auto;

packages/builder/src/components/userInterface/PropertyGroup.svelte

@@ -14,13 +14,26 @@
 </script>
 
 <DetailSummary {name} on:open show={open}>
-  {#each properties as props}
-    <PropertyControl
-      label={props.label}
-      control={props.control}
-      key={props.key}
-      value={style[props.key]}
-      onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-      props={{ ...excludeProps(props, ['control', 'label']) }} />
-  {/each}
+  <div>
+    {#each properties as props}
+      <PropertyControl
+        label={props.label}
+        control={props.control}
+        key={props.key}
+        value={style[props.key]}
+        onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
+        props={{ ...excludeProps(props, ['control', 'label']) }} />
+    {/each}
+  </div>
 </DetailSummary>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-s);
+    margin-top: var(--spacing-m);
+  }
+</style>

packages/builder/src/components/userInterface/SettingsView.svelte

@@ -18,7 +18,7 @@
   let pageScreenProps = ["title", "favicon", "description", "route"]
   let duplicateName = false
 
-  const propExistsOnComponentDef = prop =>
+  const propExistsOnComponentDef = (prop) =>
     pageScreenProps.includes(prop) || prop in componentDefinition.props
 
   function handleChange(key, data) {
@@ -47,10 +47,10 @@
   $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
   $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
 
-  const isDuplicateName = name => {
+  const isDuplicateName = (name) => {
     let duplicate = false
 
-    const lookForDuplicate = rootPops => {
+    const lookForDuplicate = (rootPops) => {
       walkProps(rootPops, (inst, cancel) => {
         if (inst._instanceName === name && inst._id !== componentInstance._id) {
           duplicate = true
@@ -85,50 +85,60 @@
   }
 </script>
 
-{#if screenOrPageInstance}
-  {#each screenOrPageDefinition as def}
-    <PropertyControl
-      bindable={false}
-      control={def.control}
-      label={def.label}
-      key={def.key}
-      value={screenOrPageInstance[def.key]}
-      onChange={onScreenPropChange}
-      props={{ ...excludeProps(def, ['control', 'label']) }} />
-  {/each}
-{/if}
-
-{#if displayNameField}
-  <PropertyControl
-    control={Input}
-    label="Name"
-    key="_instanceName"
-    value={componentInstance._instanceName}
-    onChange={onInstanceNameChange} />
-  {#if duplicateName}
-    <span class="duplicate-name">Name must be unique</span>
-  {/if}
-{/if}
-
-{#if panelDefinition && panelDefinition.length > 0}
-  {#each panelDefinition as definition}
-    {#if canRenderControl(definition.key, definition.dependsOn)}
+<div class="settings-view-container">
+  {#if screenOrPageInstance}
+    {#each screenOrPageDefinition as def}
       <PropertyControl
-        control={definition.control}
-        label={definition.label}
-        key={definition.key}
-        value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
-        {componentInstance}
-        {onChange}
-        props={{ ...excludeProps(definition, ['control', 'label']) }} />
+        bindable={false}
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={screenOrPageInstance[def.key]}
+        onChange={onScreenPropChange}
+        props={{ ...excludeProps(def, ['control', 'label']) }} />
+    {/each}
+  {/if}
+
+  {#if displayNameField}
+    <PropertyControl
+      control={Input}
+      label="Name"
+      key="_instanceName"
+      value={componentInstance._instanceName}
+      onChange={onInstanceNameChange} />
+    {#if duplicateName}
+      <span class="duplicate-name">Name must be unique</span>
     {/if}
-  {/each}
-{:else}
-  <div>This component does not have any settings.</div>
-{/if}
+  {/if}
+
+  {#if panelDefinition && panelDefinition.length > 0}
+    {#each panelDefinition as definition}
+      {#if canRenderControl(definition.key, definition.dependsOn)}
+        <PropertyControl
+          control={definition.control}
+          label={definition.label}
+          key={definition.key}
+          value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
+          {componentInstance}
+          {onChange}
+          props={{ ...excludeProps(definition, ['control', 'label']) }} />
+      {/if}
+    {/each}
+  {:else}
+    <div class="empty">This component does not have any settings.</div>
+  {/if}
+</div>
 
 <style>
-  div {
+  .settings-view-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    gap: var(--spacing-s);
+  }
+
+  .empty {
     font-size: var(--font-size-s);
     margin-top: var(--spacing-m);
     color: var(--grey-6);