Update collapsed button groups to support alignment

packages/client/manifest.json

@@ -517,11 +517,7 @@
                 "barTitle": "Align stretched horizontally"
               }
             ],
-            "defaultValue": "left",
-            "dependsOn": {
-              "setting": "collapsed",
-              "invert": true
-            }
+            "defaultValue": "left"
           },
           {
             "type": "select",
@@ -555,11 +551,7 @@
                 "barTitle": "Align stretched vertically"
               }
             ],
-            "defaultValue": "top",
-            "dependsOn": {
-              "setting": "collapsed",
-              "invert": true
-            }
+            "defaultValue": "top"
           },
           {
             "type": "select",

packages/client/src/components/app/ButtonGroup.svelte

@@ -12,8 +12,7 @@
   export let collapsed = false
   export let collapsedText = "Action"
 
-  const { styleable, enrichButtonActions } = getContext("sdk")
-  const component = getContext("component")
+  const { enrichButtonActions } = getContext("sdk")
   const context = getContext("context")
 
   $: collapsedButtons = collapsed ? makeCollapsed(buttons) : null
@@ -29,15 +28,7 @@
   }
 </script>
 
-{#if collapsed}
-  <div use:styleable={$component.styles}>
-    <CollapsedButtonGroup
-      text={collapsedText || "Action"}
-      buttons={collapsedButtons}
-    />
-  </div>
-{:else}
-  <Block>
+<Block>
   <BlockComponent
     type="container"
     props={{
@@ -53,6 +44,12 @@
       },
     }}
   >
+    {#if collapsed}
+      <CollapsedButtonGroup
+        text={collapsedText || "Action"}
+        buttons={collapsedButtons}
+      />
+    {:else}
       {#each buttons as { text, type, quiet, disabled, onClick, size, icon, gap }}
         <BlockComponent
           type="button"
@@ -68,6 +65,6 @@
           }}
         />
       {/each}
+    {/if}
   </BlockComponent>
-  </Block>
-{/if}
+</Block>