[v11.0.x] Chore: Fix position for RolePickerMenu being out of bounds (#85892)

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

(cherry picked from commit 85e66d8edb)

Co-authored-by: linoman <2051016+linoman@users.noreply.github.com>

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;
     }
 
     /*

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