Fix relationship picker styles and improve grid sizing

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>

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;

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