From 0acfa001fd4a3de586f23cad002ff6013c947ef6 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 8 May 2025 14:10:06 +0100
Subject: [PATCH] Profile page: Add horizontal scroll for teams table (#105111)

add horizontal scroll for teams table
---
 public/app/features/profile/UserTeams.tsx | 70 ++++++++++++-----------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/public/app/features/profile/UserTeams.tsx b/public/app/features/profile/UserTeams.tsx
index 9f3010045e1..70787117c7a 100644
--- a/public/app/features/profile/UserTeams.tsx
+++ b/public/app/features/profile/UserTeams.tsx
@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 
-import { LoadingPlaceholder } from '@grafana/ui';
+import { LoadingPlaceholder, ScrollContainer } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 import { Team } from 'app/types';
 
@@ -26,39 +26,41 @@ export class UserTeams extends PureComponent<Props> {
         <h3 className="page-sub-heading">
           <Trans i18nKey="profile.user-teams.teams">Teams</Trans>
         </h3>
-        <table
-          className="filter-table form-inline"
-          aria-label={t('profile.user-teams.aria-label-user-teams-table', 'User teams table')}
-        >
-          <thead>
-            <tr>
-              <th />
-              <th>
-                <Trans i18nKey="profile.user-teams.name">Name</Trans>
-              </th>
-              <th>
-                <Trans i18nKey="profile.user-teams.email">Email</Trans>
-              </th>
-              <th>
-                <Trans i18nKey="profile.user-teams.members">Members</Trans>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {teams.map((team: Team, index) => {
-              return (
-                <tr key={index}>
-                  <td className="width-4 text-center">
-                    <img className="filter-table__avatar" src={team.avatarUrl} alt="" />
-                  </td>
-                  <td>{team.name}</td>
-                  <td>{team.email}</td>
-                  <td>{team.memberCount}</td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
+        <ScrollContainer overflowY="visible" overflowX="auto" width="100%">
+          <table
+            className="filter-table form-inline"
+            aria-label={t('profile.user-teams.aria-label-user-teams-table', 'User teams table')}
+          >
+            <thead>
+              <tr>
+                <th />
+                <th>
+                  <Trans i18nKey="profile.user-teams.name">Name</Trans>
+                </th>
+                <th>
+                  <Trans i18nKey="profile.user-teams.email">Email</Trans>
+                </th>
+                <th>
+                  <Trans i18nKey="profile.user-teams.members">Members</Trans>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {teams.map((team: Team, index) => {
+                return (
+                  <tr key={index}>
+                    <td className="width-4 text-center">
+                      <img className="filter-table__avatar" src={team.avatarUrl} alt="" />
+                    </td>
+                    <td>{team.name}</td>
+                    <td>{team.email}</td>
+                    <td>{team.memberCount}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </ScrollContainer>
       </div>
     );
   }