From b21e22071e9b23c08f844256d5dc51117a477453 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 18 Apr 2023 08:05:13 +0100
Subject: [PATCH] Standardise menu overlay shadow and add count to relationship
 cells when hovering

---
 .../sheet/cells/RelationshipCell.svelte       | 23 +++++++++++++++++++
 .../sheet/overlays/MenuOverlay.svelte         |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte
index ba9d303443..c90d81ed10 100644
--- a/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte
@@ -251,6 +251,11 @@
         </div>
       {/if}
     </div>
+    {#if value?.length}
+      <div class="count">
+        {value?.length || 0}
+      </div>
+    {/if}
   </div>
 
   {#if isOpen}
@@ -320,6 +325,8 @@
   .container {
     min-height: var(--row-height);
     overflow: hidden;
+    display: flex;
+    align-items: flex-start;
   }
   .focused .container {
     overflow-y: auto;
@@ -351,6 +358,22 @@
     padding: var(--cell-padding);
     flex-wrap: wrap;
   }
+  .count {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: var(--spectrum-global-color-gray-500);
+    padding: var(--cell-padding) var(--cell-padding) var(--cell-padding) 20px;
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      var(--cell-background) 40%
+    );
+  }
+  .wrapper:hover:not(.focused) .count {
+    display: block;
+  }
   .badge {
     flex: 0 0 auto;
     padding: 0 var(--cell-padding);
diff --git a/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte b/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte
index e4542def69..9a5ad6830a 100644
--- a/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte
+++ b/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte
@@ -90,6 +90,6 @@
     border-radius: 4px;
     display: flex;
     flex-direction: column;
-    box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
   }
 </style>