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': {