feat: add a button wrapper to consolidate UI accross mobile viewports

determined-ai · Sep 26, 2024 · ed3afb6 · ed3afb6
1 parent 26510e5
commit ed3afb6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/webui/react/src/pages/Admin/UserManagement.module.scss b/webui/react/src/pages/Admin/UserManagement.module.scss
@@ -13,7 +13,8 @@
 }
 
 @media only screen and (max-width: $breakpoint-tablet-large) {
-  .selectWrapper {
+  .selectWrapper,
+  .buttonWrapper {
     width: 100%;
   }
 }
diff --git a/webui/react/src/pages/Admin/UserManagement.tsx b/webui/react/src/pages/Admin/UserManagement.tsx
@@ -522,22 +522,24 @@ const UserManagement: React.FC<Props> = ({ onUserCreate }: Props) => {
                 </div>
               </Row>
             </Column>
-            <Column align="right">
-              <Row>
-                {selectedUserIds.length > 0 && (
-                  <Dropdown menu={actionDropdownMenu} onClick={handleActionDropdown}>
-                    <Button data-testid="actions">Actions</Button>
-                  </Dropdown>
-                )}
-                <Button
-                  aria-label={CREATE_USER_LABEL}
-                  data-testid="addUser"
-                  disabled={!info.userManagementEnabled || !canModifyUsers}
-                  onClick={CreateUserModal.open}>
-                  {CREATE_USER}
-                </Button>
-              </Row>
-            </Column>
+            <div className={css.buttonWrapper}>
+              <Column align="right">
+                <Row>
+                  {selectedUserIds.length > 0 && (
+                    <Dropdown menu={actionDropdownMenu} onClick={handleActionDropdown}>
+                      <Button data-testid="actions">Actions</Button>
+                    </Dropdown>
+                  )}
+                  <Button
+                    aria-label={CREATE_USER_LABEL}
+                    data-testid="addUser"
+                    disabled={!info.userManagementEnabled || !canModifyUsers}
+                    onClick={CreateUserModal.open}>
+                    {CREATE_USER}
+                  </Button>
+                </Row>
+              </Column>
+            </div>
           </Row>
         </div>
         {settings ? (