From edbcd3d4d2773206ab18108ecc7537f49cabff86 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 3 Mar 2022 23:23:15 -0800
Subject: [PATCH] fix: Tooltips on sidebar items are sometimes miss-positioned
 on mouseleave

---
 app/components/Sidebar/components/SidebarLink.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/components/Sidebar/components/SidebarLink.tsx b/app/components/Sidebar/components/SidebarLink.tsx
index 5a541de3a..854f2fa8b 100644
--- a/app/components/Sidebar/components/SidebarLink.tsx
+++ b/app/components/Sidebar/components/SidebarLink.tsx
@@ -133,7 +133,8 @@ export const IconWrapper = styled.span`
 `;
 
 const Actions = styled(EventBoundary)<{ showActions?: boolean }>`
-  display: ${(props) => (props.showActions ? "inline-flex" : "none")};
+  display: inline-flex;
+  visibility: ${(props) => (props.showActions ? "visible" : "hidden")};
   position: absolute;
   top: 4px;
   right: 4px;
@@ -149,7 +150,7 @@ const Actions = styled(EventBoundary)<{ showActions?: boolean }>`
   }
 
   &:hover {
-    display: inline-flex;
+    visibility: visible;
 
     svg {
       opacity: 0.75;
@@ -213,7 +214,7 @@ const Link = styled(NavLink)<{ $isActiveDrop?: boolean; $isDraft?: boolean }>`
 
   @media (hover: hover) {
     &:hover + ${Actions}, &:active + ${Actions} {
-      display: inline-flex;
+      visibility: visible;
 
       svg {
         opacity: 0.75;