Profile: Fix session table overflowing page layout in mobile (#63858)

handle table overflowing in mobile layout

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;