From 4f01d55a3cbb0c74d31b9b1edb327e828ba0e8a5 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 1 Mar 2023 17:08:04 +0000
Subject: [PATCH] Profile: Fix session table overflowing page layout in mobile
 (#63858)

handle table overflowing in mobile layout
---
 public/app/features/profile/UserSessions.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/public/app/features/profile/UserSessions.tsx b/public/app/features/profile/UserSessions.tsx
index 525b2702434..107d3c636ed 100644
--- a/public/app/features/profile/UserSessions.tsx
+++ b/public/app/features/profile/UserSessions.tsx
@@ -1,3 +1,4 @@
+import { css, cx } from '@emotion/css';
 import { t } from 'i18next';
 import React, { PureComponent } from 'react';
 
@@ -15,17 +16,18 @@ interface Props {
 class UserSessions extends PureComponent<Props> {
   render() {
     const { isLoading, sessions, revokeUserSession } = this.props;
+    const styles = getStyles();
 
     if (isLoading) {
       return <LoadingPlaceholder text={<Trans i18nKey="user-sessions.loading">Loading sessions...</Trans>} />;
     }
 
     return (
-      <div>
+      <div className={styles.wrapper}>
         {sessions.length > 0 && (
           <>
             <h3 className="page-sub-heading">Sessions</h3>
-            <div className="gf-form-group">
+            <div className={cx('gf-form-group', styles.table)}>
               <table className="filter-table form-inline" data-testid={selectors.components.UserProfile.sessionsTable}>
                 <thead>
                   <tr>
@@ -76,4 +78,13 @@ class UserSessions extends PureComponent<Props> {
   }
 }
 
+const getStyles = () => ({
+  wrapper: css({
+    maxWidth: '100%',
+  }),
+  table: css({
+    overflow: 'auto',
+  }),
+});
+
 export default UserSessions;