From 22bef78a7b54e318dcbea269707dec87c4deda47 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 9 Oct 2023 16:44:03 +0200
Subject: [PATCH] Teams: Fix RolePicker overflow (#76200)

---
 public/app/features/teams/TeamList.tsx | 47 +++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/public/app/features/teams/TeamList.tsx b/public/app/features/teams/TeamList.tsx
index 341fce8f419..5b2a2d1c60d 100644
--- a/public/app/features/teams/TeamList.tsx
+++ b/public/app/features/teams/TeamList.tsx
@@ -1,6 +1,8 @@
+import { css } from '@emotion/css';
 import React, { useEffect, useMemo, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import {
   LinkButton,
   FilterInput,
@@ -14,6 +16,7 @@ import {
   HorizontalGroup,
   Pagination,
   VerticalGroup,
+  useStyles2,
 } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { Page } from 'app/core/components/Page/Page';
@@ -47,6 +50,7 @@ export const TeamList = ({
   changeSort,
 }: Props) => {
   const [roleOptions, setRoleOptions] = useState<Role[]>([]);
+  const styles = useStyles2(getStyles);
 
   useEffect(() => {
     loadTeams(true);
@@ -163,15 +167,22 @@ export const TeamList = ({
               </LinkButton>
             </div>
             <VerticalGroup spacing={'md'}>
-              <InteractiveTable
-                columns={columns}
-                data={teams}
-                getRowId={(team) => String(team.id)}
-                fetchData={changeSort}
-              />
-              <HorizontalGroup justify="flex-end">
-                <Pagination hideWhenSinglePage currentPage={page} numberOfPages={totalPages} onNavigate={changePage} />
-              </HorizontalGroup>
+              <div className={styles.wrapper}>
+                <InteractiveTable
+                  columns={columns}
+                  data={teams}
+                  getRowId={(team) => String(team.id)}
+                  fetchData={changeSort}
+                />
+                <HorizontalGroup justify="flex-end">
+                  <Pagination
+                    hideWhenSinglePage
+                    currentPage={page}
+                    numberOfPages={totalPages}
+                    onNavigate={changePage}
+                  />
+                </HorizontalGroup>
+              </div>
             </VerticalGroup>
           </>
         )}
@@ -180,6 +191,24 @@ export const TeamList = ({
   );
 };
 
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    // Enable RolePicker overflow
+    wrapper: css({
+      display: 'flex',
+      flexDirection: 'column',
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      minHeight: '100vh',
+      width: '100%',
+      '& > div': {
+        overflowX: 'unset',
+        marginBottom: theme.spacing(2),
+      },
+    }),
+  };
+};
+
 function shouldDisplayRolePicker(): boolean {
   return (
     contextSrv.licensedAccessControlEnabled() &&