add overflow-x unset

src/client/js/components/Admin/Users/UserTable.jsx

@@ -89,100 +89,101 @@ class UserTable extends React.Component {
 
     return (
       <Fragment>
-        <div className="table-responsive text-nowrap h-100">
-          <table className="table table-default table-bordered table-user-list">
-            <thead>
-              <tr>
-                <th width="100px">#</th>
-                <th>
-                  <div className="d-flex align-items-center">
-                    <div className="mr-3">
-                      {t('status')}
-                    </div>
-                    <SortIcons
-                      isSelected={adminUsersContainer.state.sort === 'status'}
-                      isAsc={isCurrentSortOrderAsc}
-                      onClick={(sortOrder) => {
+        <div className="admin-user-table">
+          <div className="table-responsive text-nowrap h-100">
+            <table className="table table-default table-bordered table-user-list">
+              <thead>
+                <tr>
+                  <th width="100px">#</th>
+                  <th>
+                    <div className="d-flex align-items-center">
+                      <div className="mr-3">
+                        {t('status')}
+                      </div>
+                      <SortIcons
+                        isSelected={adminUsersContainer.state.sort === 'status'}
+                        isAsc={isCurrentSortOrderAsc}
+                        onClick={(sortOrder) => {
                         this.sortIconsClickedHandler('status', sortOrder);
                       }}
-                    />
-                  </div>
-                </th>
-                <th>
-                  <div className="d-flex align-items-center">
-                    <div className="mr-3">
-                      <code>username</code>
+                      />
                     </div>
-                    <SortIcons
-                      isSelected={adminUsersContainer.state.sort === 'username'}
-                      isAsc={isCurrentSortOrderAsc}
-                      onClick={(sortOrder) => {
+                  </th>
+                  <th>
+                    <div className="d-flex align-items-center">
+                      <div className="mr-3">
+                        <code>username</code>
+                      </div>
+                      <SortIcons
+                        isSelected={adminUsersContainer.state.sort === 'username'}
+                        isAsc={isCurrentSortOrderAsc}
+                        onClick={(sortOrder) => {
                         this.sortIconsClickedHandler('username', sortOrder);
                       }}
-                    />
-                  </div>
-                </th>
-                <th>
-                  <div className="d-flex align-items-center">
-                    <div className="mr-3">
-                      {t('Name')}
+                      />
                     </div>
-                    <SortIcons
-                      isSelected={adminUsersContainer.state.sort === 'name'}
-                      isAsc={isCurrentSortOrderAsc}
-                      onClick={(sortOrder) => {
+                  </th>
+                  <th>
+                    <div className="d-flex align-items-center">
+                      <div className="mr-3">
+                        {t('Name')}
+                      </div>
+                      <SortIcons
+                        isSelected={adminUsersContainer.state.sort === 'name'}
+                        isAsc={isCurrentSortOrderAsc}
+                        onClick={(sortOrder) => {
                         this.sortIconsClickedHandler('name', sortOrder);
                       }}
-                    />
-                  </div>
-                </th>
-                <th>
-                  <div className="d-flex align-items-center">
-                    <div className="mr-3">
-                      {t('Email')}
+                      />
                     </div>
-                    <SortIcons
-                      isSelected={adminUsersContainer.state.sort === 'email'}
-                      isAsc={isCurrentSortOrderAsc}
-                      onClick={(sortOrder) => {
+                  </th>
+                  <th>
+                    <div className="d-flex align-items-center">
+                      <div className="mr-3">
+                        {t('Email')}
+                      </div>
+                      <SortIcons
+                        isSelected={adminUsersContainer.state.sort === 'email'}
+                        isAsc={isCurrentSortOrderAsc}
+                        onClick={(sortOrder) => {
                         this.sortIconsClickedHandler('email', sortOrder);
                       }}
-                    />
-                  </div>
-                </th>
-                <th width="100px">
-                  <div className="d-flex align-items-center">
-                    <div className="mr-3">
-                      {t('Created')}
+                      />
                     </div>
-                    <SortIcons
-                      isSelected={adminUsersContainer.state.sort === 'createdAt'}
-                      isAsc={isCurrentSortOrderAsc}
-                      onClick={(sortOrder) => {
+                  </th>
+                  <th width="100px">
+                    <div className="d-flex align-items-center">
+                      <div className="mr-3">
+                        {t('Created')}
+                      </div>
+                      <SortIcons
+                        isSelected={adminUsersContainer.state.sort === 'createdAt'}
+                        isAsc={isCurrentSortOrderAsc}
+                        onClick={(sortOrder) => {
                         this.sortIconsClickedHandler('createdAt', sortOrder);
                       }}
-                    />
-                  </div>
-                </th>
-                <th width="150px">
-                  <div className="d-flex align-items-center">
-                    <div className="mr-3">
-                      {t('Last_Login')}
+                      />
                     </div>
-                    <SortIcons
-                      isSelected={adminUsersContainer.state.sort === 'lastLoginAt'}
-                      isAsc={isCurrentSortOrderAsc}
-                      onClick={(sortOrder) => {
+                  </th>
+                  <th width="150px">
+                    <div className="d-flex align-items-center">
+                      <div className="mr-3">
+                        {t('Last_Login')}
+                      </div>
+                      <SortIcons
+                        isSelected={adminUsersContainer.state.sort === 'lastLoginAt'}
+                        isAsc={isCurrentSortOrderAsc}
+                        onClick={(sortOrder) => {
                         this.sortIconsClickedHandler('lastLoginAt', sortOrder);
                       }}
-                    />
-                  </div>
-                </th>
-                <th width="70px"></th>
-              </tr>
-            </thead>
-            <tbody>
-              {adminUsersContainer.state.users.map((user) => {
+                      />
+                    </div>
+                  </th>
+                  <th width="70px"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {adminUsersContainer.state.users.map((user) => {
                 return (
                   <tr key={user._id}>
                     <td>
@@ -204,9 +205,11 @@ class UserTable extends React.Component {
                   </tr>
                 );
               })}
-            </tbody>
-          </table>
+              </tbody>
+            </table>
+          </div>
         </div>
+
       </Fragment>
     );
   }

src/client/styles/scss/_admin.scss

@@ -9,6 +9,12 @@
     line-height: 1.1em;
   }
 
+  .admin-user-table {
+    .table-responsive {
+      overflow-x: unset;
+    }
+  }
+
   .admin-user-menu {
     .dropdown-menu {
       right: 0;