Standardise menu overlay shadow and add count to relationship cells when hovering

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);

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>