From 9ba76038a0397fdf735c91ea0185f0ff28192909 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Thu, 18 Apr 2024 18:18:10 +0200
Subject: [PATCH] [v11.0.x] RolePicker: Adjust dynamic position (#86542)

RolePicker: Adjust dynamic position (#86424)

* Adjust dynamic position

(cherry picked from commit 1d1ebee36b2bdafaa14c60ff3b494a64b7b601d1)

Co-authored-by: linoman <2051016+linoman@users.noreply.github.com>
---
 .../core/components/RolePicker/RolePicker.tsx | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/public/app/core/components/RolePicker/RolePicker.tsx b/public/app/core/components/RolePicker/RolePicker.tsx
index 24675c92ce0..fe958e408c6 100644
--- a/public/app/core/components/RolePicker/RolePicker.tsx
+++ b/public/app/core/components/RolePicker/RolePicker.tsx
@@ -80,15 +80,24 @@ export const RolePicker = ({
     }
     const { bottom, top, left, right } = dimensions;
     let horizontal = left;
-    let vertical = bottom + 10; // Add extra 10px to offset to account for border and outline
     let menuToLeft = false;
 
     const distance = window.innerHeight - bottom;
-    vertical = bottom;
+    let vertical = bottom + 5;
+    let ToTheSide = false;
     if (distance < MENU_MAX_HEIGHT + 20) {
-      // Limit the top position to 80px to avoid the menu going off the screen
-      vertical = top < 80 ? 80 : top;
-      horizontal += right - left + 8;
+      // move the menu above the input if there is not enough space below
+      vertical = top - MENU_MAX_HEIGHT - 50;
+    }
+
+    // check if there is enough space above the input field
+    if (top < MENU_MAX_HEIGHT + 50) {
+      // if not, reset the vertical position
+      vertical = top;
+      // move the menu to the right edge of the input field
+      horizontal = right + 5;
+      // flag to align the menu to the right or left edge of the input field
+      ToTheSide = true;
     }
 
     /*
@@ -98,8 +107,8 @@ export const RolePicker = ({
      * both (the role picker menu and its sub menu) aligned to the left edge of the input.
      * Otherwise, it aligns the role picker menu to the right.
      */
-    if (left + ROLE_PICKER_MAX_MENU_WIDTH > window.innerWidth) {
-      horizontal = window.innerWidth - right;
+    if (horizontal + ROLE_PICKER_MAX_MENU_WIDTH > window.innerWidth) {
+      horizontal = window.innerWidth - (ToTheSide ? left : right);
       menuToLeft = true;
     }