From 2f55773eddcb6f0dc4f50ccb9ed91e21537004ac Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 25 Apr 2022 20:17:09 +0100
Subject: [PATCH] Fix status lights and context menus working together in nav
 items

---
 .../src/components/common/NavItem.svelte       | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 2601640ca7..f9c5d82753 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -114,7 +114,7 @@
     background-color: var(--grey-3);
   }
   .nav-item:hover .actions {
-    display: grid;
+    visibility: visible;
   }
   .nav-item-content {
     flex: 1 1 auto;
@@ -125,6 +125,7 @@
     gap: var(--spacing-xs);
     width: max-content;
     overflow: hidden;
+    position: relative;
   }
 
   .icon {
@@ -145,6 +146,11 @@
   .icon + .icon {
     margin-left: -4px;
   }
+  .iconText {
+    margin-top: 1px;
+    font-size: var(--spectrum-global-dimension-font-size-50);
+    flex: 0 0 34px;
+  }
 
   .text {
     font-weight: 600;
@@ -162,8 +168,9 @@
   .actions {
     cursor: pointer;
     position: relative;
-    display: none;
+    display: grid;
     place-items: center;
+    visibility: hidden;
   }
   .actions,
   .light :global(.spectrum-StatusLight) {
@@ -171,10 +178,9 @@
     height: 20px;
     margin-left: var(--spacing-s);
   }
-  .iconText {
-    margin-top: 1px;
-    font-size: var(--spectrum-global-dimension-font-size-50);
-    flex: 0 0 34px;
+  .light {
+    position: absolute;
+    right: 0;
   }
   .nav-item.withActions:hover .light {
     display: none;