fix: Update action bar row layout in UserManagement page (#9862)

determined-ai · Oct 7, 2024 · 7e8dbac · 7e8dbac
1 parent 5b1380c
commit 7e8dbac
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 36 deletions.
diff --git a/webui/react/src/pages/Admin/UserManagement.module.scss b/webui/react/src/pages/Admin/UserManagement.module.scss
@@ -1,13 +1,30 @@
+.actionBar {
+  align-items: center;
+  display: grid;
+  gap: var(--spacing-md);
+  grid-template:
+    'input roleSelect statusSelect buttonGroup' auto
+    / minmax(auto, max-content) minmax(min-content, 120px) minmax(min-content, 170px) auto;
+  margin-bottom: 8px;
+}
+.gridButtons {
+  grid-area: buttonGroup;
+}
 .usersTable {
   .overflow {
     &:hover {
       background: transparent !important;
     }
   }
 }
-.rightAligned {
-  text-align: right;
-}
-.actionBar {
-  margin-bottom: 8px;
+
+@media only screen and (max-width: $breakpoint-tablet) {
+  .actionBar {
+    grid-template:
+      'input' auto
+      'roleSelect' auto
+      'statusSelect' auto
+      'buttonGroup' auto
+      / 100%;
+  }
 }
diff --git a/webui/react/src/pages/Admin/UserManagement.tsx b/webui/react/src/pages/Admin/UserManagement.tsx
@@ -483,36 +483,34 @@ const UserManagement: React.FC<Props> = ({ onUserCreate }: Props) => {
     <>
       <Section className={css.usersTable}>
         <div className={css.actionBar} data-testid="actionRow">
-          <Row>
-            <Column>
-              <Row>
-                {/* input is uncontrolled */}
-                <Input
-                  allowClear
-                  data-testid="search"
-                  defaultValue={nameFilter}
-                  placeholder="Find user"
-                  prefix={<Icon color="cancel" decorative name="search" size="tiny" />}
-                  onChange={handleNameSearchApply}
-                />
-                <Select
-                  data-testid="roleSelect"
-                  options={roleOptions}
-                  searchable={false}
-                  value={roleFilter}
-                  width={120}
-                  onChange={handleRoleFilterApply}
-                />
-                <Select
-                  data-testid="statusSelect"
-                  options={statusOptions}
-                  searchable={false}
-                  value={statusFilter}
-                  width={170}
-                  onChange={handleStatusFilterApply}
-                />
-              </Row>
-            </Column>
+          <Input
+            allowClear
+            data-testid="search"
+            defaultValue={nameFilter}
+            placeholder="Find user"
+            prefix={<Icon color="cancel" decorative name="search" size="tiny" />}
+            width={'100%'}
+            onChange={handleNameSearchApply}
+          />
+          <Select
+            data-testid="roleSelect"
+            options={roleOptions}
+            placeholder="Role"
+            searchable={false}
+            value={roleFilter}
+            width={'100%'}
+            onChange={handleRoleFilterApply}
+          />
+          <Select
+            data-testid="statusSelect"
+            options={statusOptions}
+            placeholder="Status"
+            searchable={false}
+            value={statusFilter}
+            width={'100%'}
+            onChange={handleStatusFilterApply}
+          />
+          <div className={css.gridButtons}>
             <Column align="right">
               <Row>
                 {selectedUserIds.length > 0 && (
@@ -529,7 +527,7 @@ const UserManagement: React.FC<Props> = ({ onUserCreate }: Props) => {
                 </Button>
               </Row>
             </Column>
-          </Row>
+          </div>
         </div>
         {settings ? (
           <InteractiveTable<DetailedUser, UserManagementSettingsWithColumns>

diff --git a/webui/react/src/styles/globalBreakpoints.module.scss b/webui/react/src/styles/globalBreakpoints.module.scss
@@ -0,0 +1,9 @@
+/* stylelint-disable selector-pseudo-class-no-unknown, property-no-unknown */
+
+:export {
+  breakpointDesktopLarge: $breakpoint-desktop-large;
+  breakpointDesktopMedium: $breakpoint-desktop-medium;
+  breakpointDesktopSmall: $breakpoint-desktop-small;
+  breakpointMobile: $breakpoint-mobile;
+  breakpointTablet: $breakpoint-tablet;
+}