From 2bc4d3a6da66847aa342afec798230e14eb2f680 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 2 Aug 2024 10:00:49 +0100
Subject: [PATCH] Improve more component compatibility with grid layouts

---
 .../app/[application]/design/[screenId]/_layout.svelte |  6 +-----
 packages/client/manifest.json                          | 10 +++++++++-
 packages/client/src/components/app/ButtonGroup.svelte  |  5 +++++
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index c3f3ef71f5..ac87b53db2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/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"
 
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 46595279b4..f61ed7d1bc 100644
--- a/packages/client/manifest.json
+++ b/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": {
diff --git a/packages/client/src/components/app/ButtonGroup.svelte b/packages/client/src/components/app/ButtonGroup.svelte
index 2cf6b3db7d..b3523cdd21 100644
--- a/packages/client/src/components/app/ButtonGroup.svelte
+++ b/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