determined
determined copied to clipboard
determined-ai
fix: Update action bar row layout in UserManagement page
Ticket
Description
The user management page had a broken layout for the "add user" button on mobile view. This PR intends to fix that.
Test Plan
- Log in as an admin
- go to the "Admin" management page from the dropdown menu (that should take you to the user management page)
- enable mobile view (from the terminal console, there is a "desktop" button on the top-left corner, that toggles the view mode)
- the UI should have the "add user" button showing below the filters
Checklist
- [ ] Changes have been manually QA'd
- [ ] New features have been approved by the corresponding PM
- [ ] User-facing API changes have the "User-facing API Change" label
- [ ] Release notes have been added as a separate file under
docs/release-notes/See Release Note for details. - [ ] Licenses have been included for new code which was copied and/or modified from any external code
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Project coverage is 50.55%. Comparing base (
ddca766) to head (78d0596). Report is 5 commits behind head on main.
Additional details and impacted files
@@ Coverage Diff @@
## main #9862 +/- ##
==========================================
- Coverage 54.60% 50.55% -4.05%
==========================================
Files 1259 949 -310
Lines 157329 128683 -28646
Branches 3619 3620 +1
==========================================
- Hits 85903 65059 -20844
+ Misses 71293 63491 -7802
Partials 133 133
| Flag | Coverage Δ | |
|---|---|---|
| harness | ? |
|
| web | 54.36% <100.00%> (-0.01%) |
:arrow_down: |
Flags with carried forward coverage won't be shown. Click here to find out more.
| Files with missing lines | Coverage Δ | |
|---|---|---|
| webui/react/src/pages/Admin/UserManagement.tsx | 83.78% <100.00%> (-0.06%) |
:arrow_down: |
![codecov[bot] avatar](https://avatars.githubusercontent.com/in/254?v=4 "Published by a pub.dev verified publisher"){kind=small}
Deploy Preview for determined-ui ready!
| Name | Link |
|---|---|
| Latest commit | 78d0596cb984fae17bbddd3650cff61a8a60b2d0 |
| Latest deploy log | https://app.netlify.com/sites/determined-ui/deploys/66ff052bf9034d0008475ed9 |
| Deploy Preview | https://deploy-preview-9862--determined-ui.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
@alexjdetermined could you take a look at this approach and give us your thought please 🙏
can we fix the horizontal scroll issue?
Screen.Recording.2024-08-23.at.12.19.22.PM.mov also can we confirm with a designer and a product manage if its a good approach to fix the ticket issue r? not sure if we wanna show
add userbutton in new line.
I believe that this is an animation from the browser, I've tested locally and got that animation too, but, no scroll is being kept...
I've already asked for validation from @alexjdetermined about the design changes
I believe that this is an animation from the browser, I've tested locally and got that animation too, but, no scroll is being kept...
i dont think so. It doesn't bounce, i can just scroll horizontally.
I've updated the behavior for the mobile view, that's the best I could do before getting anything back from the design team... cc @alexjdetermined
the issue is still present
could you share which screen-size are you using there?! because I've checked the mobile breakpoints and it's all fine
that needs to be desktop mode instead of mobile. i think It should need the same treatment as mobile.
that needs to be desktop mode instead of mobile. i think It should need the same treatment as mobile.
so, this is the smallest desktop breakpoint
that needs to be desktop mode instead of mobile. i think It should need the same treatment as mobile.
so, this is the smallest desktop breakpoint
on desktop 800 x 950
on mobile
I've added a breakpoint var for "big tablets" that should cover everything now...
can we move add user button to the bottom (the same row as status select) in tablet view to make all views consistent?
can we move
add userbutton to the bottom (the same row as status select) in tablet view to make all views consistent?
IMHO, for such "larger" mobile breakpoints it would make a bit too much for the inputs... it would look unnecessarily big, no?! @alexjdetermined
I've investigated thoroughly, I honestly don't know what breakpoint is it that you found that new edge case, but, here's a before and after my last change (I've increased the max-width for the tablet-large variable to 1023px, which means that it will cover every screen size up to that screen size, which is just 1px less than the desktop view).
BEFORE
https://github.com/user-attachments/assets/3601f405-fc8b-41ef-97b1-832fa6044b25
AFTER
https://github.com/user-attachments/assets/18f71564-30aa-47f5-8063-9f98437bcbf1
@alexjdetermined, could you please provide a mockup/wireframe for us here...
mostly looks good to me. only concern is that only 4 letters are visible in the search field and texts in the select boxes are truncated in a certain viewport. it wouldn't be visible if we add one more button.
I've changed the minmax for the selects to have a min of min-content, that should solve that issue, but, at the cost of reducing the width of the search input... but, I guess that we should get something from @alexjdetermined for that perhaps. cc @keita-determined
@keita-determined wouldn't a better solve for this be to have the menu switch to mobile mode at tablet sizes? looking at the rest of the table, is the content readable?
@keita-determined wouldn't a better solve for this be to have the menu switch to mobile mode at tablet sizes? looking at the rest of the table, is the content readable?
Your suggestion is to use mobile view in the tablet size viewport, right? that sounds good to me