From 85e66d8edbbb72d517af5a560b1457e62ff2d2f9 Mon Sep 17 00:00:00 2001
From: linoman <2051016+linoman@users.noreply.github.com>
Date: Wed, 10 Apr 2024 09:51:50 -0600
Subject: [PATCH] Chore: Fix position for RolePickerMenu being out of bounds
 (#85604)

* Fix position for RolePickerMenu being out of bounds

* adjust the offset of the role picker menu
---
 public/app/core/components/RolePicker/RolePicker.tsx | 7 ++++---
 public/app/core/components/RolePicker/styles.ts      | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/RolePicker/RolePicker.tsx b/public/app/core/components/RolePicker/RolePicker.tsx
index 9b38dead657..24675c92ce0 100644
--- a/public/app/core/components/RolePicker/RolePicker.tsx
+++ b/public/app/core/components/RolePicker/RolePicker.tsx
@@ -84,10 +84,11 @@ export const RolePicker = ({
     let menuToLeft = false;
 
     const distance = window.innerHeight - bottom;
+    vertical = bottom;
     if (distance < MENU_MAX_HEIGHT + 20) {
-      // Off set to display the role picker menu at the bottom of the screen
-      // without resorting to scroll the page
-      vertical = top - MENU_MAX_HEIGHT - 50;
+      // Limit the top position to 80px to avoid the menu going off the screen
+      vertical = top < 80 ? 80 : top;
+      horizontal += right - left + 8;
     }
 
     /*
diff --git a/public/app/core/components/RolePicker/styles.ts b/public/app/core/components/RolePicker/styles.ts
index befe0602a92..bbafed71a87 100644
--- a/public/app/core/components/RolePicker/styles.ts
+++ b/public/app/core/components/RolePicker/styles.ts
@@ -89,7 +89,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
   }),
   menuOptionExpand: css({
     position: 'absolute',
-    right: theme.spacing(1.25),
+    right: theme.spacing(2.5),
     color: theme.colors.text.disabled,
 
     '&:after': {