fix

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

@@ -89,101 +89,100 @@ class UserTable extends React.Component {
 
     return (
       <Fragment>
-        <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) => {
+        <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>
-                  </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) => {
+                    <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>
-                  </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) => {
+                    <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>
-                  </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) => {
+                    <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>
-                  </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) => {
+                    <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>
-                  </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) => {
+                    <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>
@@ -205,9 +204,8 @@ class UserTable extends React.Component {
                   </tr>
                 );
               })}
-              </tbody>
-            </table>
-          </div>
+            </tbody>
+          </table>
         </div>
 
       </Fragment>

src/client/styles/scss/_admin.scss

@@ -9,10 +9,8 @@
     line-height: 1.1em;
   }
 
-  .admin-user-table {
-    .table-responsive {
-      overflow-x: unset;
-    }
+  .table-responsive {
+    overflow-x: unset;
   }
 
   .admin-user-menu {