Service accounts: Fix mouse leave event by hide scrollbar in firefox and chrome (#74266)

fix: hide scrollbar in firefox and chrome for menu, due to mouse leave event

public/app/core/components/RolePicker/RolePickerMenu.tsx

@@ -219,7 +219,15 @@ export const RolePickerMenu = ({
       )}
     >
       <div className={customStyles.menu} aria-label="Role picker menu">
-        <CustomScrollbar autoHide={false} autoHeightMax={`${MENU_MAX_HEIGHT}px`} hideHorizontalTrack hideVerticalTrack>
+        <CustomScrollbar
+          autoHide={false}
+          autoHeightMax={`${MENU_MAX_HEIGHT}px`}
+          hideHorizontalTrack
+          hideVerticalTrack
+          // NOTE: this is a way to force hiding of the scrollbar
+          // the scrollbar makes the mouseEvents drop
+          className={cx(customStyles.hideScrollBar)}
+        >
           {showBasicRole && (
             <div className={customStyles.menuSection}>
               <BuiltinRoleSelector

public/app/core/components/RolePicker/styles.ts

@@ -6,6 +6,16 @@ import { ROLE_PICKER_SUBMENU_MIN_WIDTH } from './constants';
 
 export const getStyles = (theme: GrafanaTheme2) => {
   return {
+    hideScrollBar: css`
+      .scrollbar-view {
+        /* Hide scrollbar for Chrome, Safari, and Opera */
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        /* Hide scrollbar for Firefox */
+        scrollbar-width: none;
+      }
+    `,
     menuWrapper: css`
       display: flex;
       max-height: 650px;