From b067b8ad541ebe0550ff198be6adb23402fc2baf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 4 Sep 2024 09:19:51 +0100
Subject: [PATCH] Update relationship popover styles and position

---
 .../grid/cells/RelationshipCell.svelte        | 20 +++++++++++++------
 .../grid/overlays/GridPopover.svelte          |  3 ++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
index 73c8a99cc2..c95faa0b9f 100644
--- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
@@ -29,6 +29,7 @@
   let searching = false
   let container
   let anchor
+  let relationshipAnchor
   let relationshipFields
 
   $: fieldValue = parseValue(value)
@@ -57,6 +58,7 @@
   }, {})
 
   $: showRelationshipFields =
+    relationshipAnchor &&
     relationshipFields &&
     Object.keys(relationshipFields).length &&
     focused &&
@@ -242,11 +244,13 @@
     return value
   }
 
-  const displayRelationshipFields = relationship => {
+  const displayRelationshipFields = (e, relationship) => {
+    relationshipAnchor = e.target
     relationshipFields = relationFields[relationship._id]
   }
 
   const hideRelationshipFields = () => {
+    relationshipAnchor = null
     relationshipFields = undefined
   }
 
@@ -281,7 +285,7 @@
           <div
             class="badge"
             class:extra-info={!!relationFields[relationship._id]}
-            on:mouseover={() => displayRelationshipFields(relationship)}
+            on:mouseenter={e => displayRelationshipFields(e, relationship)}
             on:focus={() => {}}
             on:mouseleave={() => hideRelationshipFields()}
           >
@@ -359,7 +363,7 @@
 {/if}
 
 {#if showRelationshipFields}
-  <GridPopover {anchor} minWidth={300} maxWidth={400}>
+  <GridPopover anchor={relationshipAnchor} maxWidth={400} offset={4}>
     <div class="relationship-fields">
       {#each Object.entries(relationshipFields) as [fieldName, fieldValue]}
         <div class="relationship-field-name">
@@ -543,15 +547,19 @@
   .relationship-fields {
     margin: var(--spacing-m) var(--spacing-l);
     display: grid;
-    grid-template-columns: minmax(auto, 50%) auto;
+    grid-template-columns: auto 1fr;
     grid-row-gap: var(--spacing-m);
-    grid-column-gap: var(--spacing-m);
+    grid-column-gap: var(--spacing-xl);
   }
 
   .relationship-field-name {
     text-transform: uppercase;
     color: var(--spectrum-global-color-gray-600);
-    font-size: var(--font-size-xs);
+    font-size: 12px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 120px;
   }
   .relationship-field-value {
     overflow: hidden;
diff --git a/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte b/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
index ac2a998428..80647a494e 100644
--- a/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
@@ -15,6 +15,7 @@
   export let open = true
   export let resizable = false
   export let wrap = true
+  export let offset = 0
 
   const { gridID } = getContext("grid")
   const dispatch = createEventDispatcher()
@@ -42,8 +43,8 @@
   {align}
   {resizable}
   {wrap}
+  {offset}
   portalTarget="#{gridID} .grid-popover-container"
-  offset={0}
 >
   <div
     class="grid-popover-contents"