Improve more component compatibility with grid layouts

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte

@@ -2,11 +2,7 @@
   import AppPanel from "./_components/AppPanel.svelte"
   import * as routify from "@roxi/routify"
   import { syncURLToState } from "helpers/urlStateSync"
-  import {
-    screenStore,
-    selectedScreen,
-    selectedComponent,
-  } from "stores/builder"
+  import { screenStore, selectedScreen } from "stores/builder"
   import { onDestroy } from "svelte"
   import LeftPanel from "./_components/LeftPanel.svelte"
 

packages/client/manifest.json

@@ -388,6 +388,14 @@
     "name": "Button group",
     "icon": "Button",
     "hasChildren": false,
+    "size": {
+      "width": 200,
+      "height": 60
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
     "settings": [
       {
         "section": true,
@@ -570,7 +578,7 @@
     "icon": "Button",
     "editable": true,
     "size": {
-      "width": 105,
+      "width": 120,
       "height": 32
     },
     "grid": {

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

@@ -19,6 +19,11 @@
       gap,
       wrap: true,
     }}
+    styles={{
+      normal: {
+        height: "100%",
+      },
+    }}
   >
     {#each buttons as { text, type, quiet, disabled, onClick, size, icon, gap }}
       <BlockComponent