From 54621b153901af023267cf1119dab78be85caa00 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 25 Apr 2024 08:34:33 +0100
Subject: [PATCH] Fix relationship picker styles and improve grid sizing

---
 .../src/components/common/RelationshipSelector.svelte  |  8 +++-----
 .../src/components/grid/cells/HeaderCell.svelte        | 10 ++--------
 .../frontend-core/src/components/grid/lib/constants.js |  2 +-
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/components/common/RelationshipSelector.svelte b/packages/builder/src/components/common/RelationshipSelector.svelte
index 63f0357a8f..5e840d4ffb 100644
--- a/packages/builder/src/components/common/RelationshipSelector.svelte
+++ b/packages/builder/src/components/common/RelationshipSelector.svelte
@@ -75,14 +75,12 @@
   .relationship-container {
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: var(--spacing-m);
   }
-
   .relationship-part {
-    flex-basis: 70%;
+    flex: 1 1 auto;
   }
-
   .relationship-type {
-    flex-basis: 30%;
+    flex: 0 0 128px;
   }
 </style>
diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
index 07c7438684..da9d179904 100644
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -46,7 +46,6 @@
   let open = false
   let editIsOpen = false
   let timeout
-  let popover
   let migrationModal
   let searchValue
   let input
@@ -104,11 +103,6 @@
     dispatch("edit-column", column.schema)
   }
 
-  const cancelEdit = () => {
-    popover.hide()
-    editIsOpen = false
-  }
-
   const onMouseDown = e => {
     if (e.button === 0 && orderable) {
       timeout = setTimeout(() => {
@@ -234,7 +228,7 @@
   }
   const debouncedUpdateFilter = debounce(updateFilter, 250)
 
-  onMount(() => subscribe("close-edit-column", cancelEdit))
+  onMount(() => subscribe("close-edit-column", close))
 </script>
 
 <Modal bind:this={migrationModal}>
@@ -476,7 +470,7 @@
   }
 
   .content {
-    width: 300px;
+    width: 360px;
     padding: 20px;
     display: flex;
     flex-direction: column;
diff --git a/packages/frontend-core/src/components/grid/lib/constants.js b/packages/frontend-core/src/components/grid/lib/constants.js
index c42e49875f..4b5d04894a 100644
--- a/packages/frontend-core/src/components/grid/lib/constants.js
+++ b/packages/frontend-core/src/components/grid/lib/constants.js
@@ -10,7 +10,7 @@ export const DefaultRowHeight = SmallRowHeight
 export const NewRowID = "new"
 export const BlankRowID = "blank"
 export const RowPageSize = 100
-export const FocusedCellMinOffset = 48
+export const FocusedCellMinOffset = ScrollBarSize * 3
 export const ControlsHeight = 50
 
 // Popovers