From 44efcee58e2a6ccc32195a17f12e77ca81e2de8e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 4 Jul 2023 11:33:06 +0100
Subject: [PATCH] Fix tooltip sizes for roles and fix pointer events on nav
 items

---
 packages/builder/src/components/common/NavItem.svelte     | 1 +
 .../[screenId]/screens/_components/RoleIndicator.svelte   | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index 5ffc5eacf0..a0a964b84e 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -175,6 +175,7 @@
     left: 0;
     top: 0;
     border-radius: 2px;
+    pointer-events: none;
   }
   .selected-by-label {
     position: absolute;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
index 2c95c6fb82..2555b0b2a2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
@@ -12,8 +12,8 @@
   $: role = $roles.find(role => role._id === roleId)
   $: tooltip =
     roleId === Roles.PUBLIC
-      ? "This screen is open to the public"
-      : `Requires at least ${role?.name} access`
+      ? "Open to the public"
+      : `Requires ${role?.name} access`
 </script>
 
 <div
@@ -44,14 +44,14 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
-    width: 130px;
+    width: 200px;
     pointer-events: none;
   }
   .tooltip :global(.spectrum-Tooltip) {
     background: var(--color);
     color: white;
     font-weight: 600;
-    max-width: 130px;
+    max-width: 200px;
   }
   .tooltip :global(.spectrum-Tooltip-tip) {
     border-top-color: var(--color);