Yili fix UI issues on the User Management Page

[suaniii]

Description

Related PRS (if any):

For backend use development branch

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to dashboard→ Other Links→ User Management
6. Ensure the search input size is appropriate at screen widths around 641px and 491px.
7. Check that there is proper spacing and left alignment between top items at 375px.
8. Verify that the user table font size reduces after 750px to minimize side scrolling.
9. Confirm that the setup invitation history modal uses a bordered table and includes placeholders in Email input.
10. Ensure that the placeholder text is fully visible in the Setup New User modal at 375px.
11. Verify that the reset password modal does not have excessive space beneath the labels.

Screenshots or videos of changes:

USER.MANAGEMENT.PAGE.UI.mov

[JatinAgrawal94]

There is no space between two rows of buttons as shown in below images, rest everything described works.

---

Reply:
Thank you for the feedback! The lack of space between the two rows of buttons is intentional. If any adjustments are needed in the future, we can revisit this, but for now, this is how it's supposed to look.

[manikittu810]

Hello @suaniii , I have gone through every step mentioned and everything is working as mentioned in the description.

Thank you.

[kdaga81]

We can add some margin between the buttons. Rest everything working as expected!

[Pranay-ai]

Hey @suaniii
The PR is working as expected but they are few issues with it in mobile view

The Search and show Inputs are not aligned .
Thank You.

[FayeLV]

Hi,
Great job! Overall, all functionalities and styles are working as expected, and the design adapts well across different screen sizes:
Button Spacing: The spacing to the right of the "Show" button is correct, keeping the layout tidy.
Input Size: The search input size is appropriate at 641px and 491px, matching the page's style.
Alignment and Spacing: Proper spacing and alignment are maintained at 375px screen width.
Font Scaling: The font size in the user table reduces correctly below 750px, minimizing side scrolling.
Modal Design:
Setup Invitation History Modal: Uses a bordered table, and Email input includes placeholders, meeting design standards.
Setup New User Modal: Placeholder text is fully visible at 375px, ensuring good visual appearance.
Modal Layout: The reset password modal manages spacing under labels well, with no excessive gaps.

[sriramsme]

Hey @suaniii , I have reviewed your PR and tested the UI changes. Everything looks good and as expected.

[SnelPatare]

I have tested the changes and everything is working as expected. Please details below
Verify that there is spacing to the right of the show button. - Working as expected
Ensure the search input size is appropriate at screen widths around 641px and 491px. - Working as expected
Check that there is proper spacing and left alignment between top items at 375px. - "Send Setup link" and "Create new user" buttons are overlapping. Needs to improve
Verify that the user table font size reduces after 750px to minimize side scrolling. - Working as expected
Ensure that the placeholder text is fully visible in the Setup New User modal at 375px. - Working as expected
Verify that the reset password modal does not have excessive space beneath the labels. - Working as expected

Please find images below.

[strallia]

I've tested the functionalities and they work as expected.

These are other issues I found:

• In Safari, the select inputs do not have consistent design with the other inputs and are misaligned.

• At 375px width, design-wise I think there could be more spacing between the top items so the buttons and inputs aren’t touching.

• In the Setup Invitation History modal, it would make more sense to have the Email placeholder be “Enter Email” instead of “Your Email” since it’s a list of other people’s emails.

[Jingyii800]

I have tested this function and it works as expected. While shrinking the page under 600 px width, all button and search box display in a good format.

bandicam.2024-09-05.21-59-09-384.mp4

[sud306]

Hi,
I have reviewed the PR and everything looks as expected.

[yashwanth170]

Everything works as expected!

[AJAYINAVOLU]

Changes are working as expected.

Thank You

[crystallow1168]

Hi @suaniii

Everything is working as expected and here are my findings:

✅ Verify that there is spacing to the right of the show button.
✅ Ensure the search input size is appropriate at screen widths around 641px and 491px.

---

✅ Check that there is proper spacing and left alignment between top items at 375px.

Suggestion: Add top/bottom margin to prevent the elements from appearing cramped.

---

✅ Verify that the user table font size reduces after 750px to minimize side scrolling.
Confirm that the setup invitation history modal uses a bordered table and includes placeholders in Email input.

---

✅ Ensure that the placeholder text is fully visible in the Setup New User modal at 375px.

PR.2583.mp4

---

✅ Verify that the reset password modal does not have excessive space beneath the labels.

[swaroop-2007]

Hey, @suaniii
I reviewed your work and went through it in detail. Everything works well. Thank you!

[Parth-tech]

Hey Yili,
Your work is working correctly. But I found that between screen size 770px and 991px the labels Weekly Committed Hours and Weekly Summary Options overflow. If that could be resolved in this PR itself, it would be great.

Image Reference for error:

Correctly Working UI reference images:

[vedantg24]

Tested the PR, and the changes are working as expected.

-There is spacing to the right of the show button.
-The search input size is appropriate at screen widths around 641px and 491px.

-There is proper spacing and left alignment between top items at 375px.

-The user table font size reduces after 750px.

-The setup invitation history modal uses a bordered table and includes placeholders in Email input.

-The placeholder text is visible in the Setup New User modal at 375px.

-The reset password modal does not have excessive space beneath the labels.

[vishnupriyaatheti]

@suaniii I have Verified the PR and changes are working as expected.

[ashayk9]

I have tested the pr, verified the following changes and everything is functioning as expected:

1. Spacing: There is adequate spacing to the right of the "Show" button.
2. Search Input Size: The search input size is appropriate at screen widths of 641px and 491px.
3. Top Items Alignment: Proper spacing and left alignment between top items are maintained at 375px.
4. User Table Font Size: The font size in the user table reduces after 750px
5. Setup Invitation History Modal: The modal uses a bordered table and includes placeholders in the Email input field.
6. Setup New User Modal: The placeholder text is fully visible at 375px.
7. Reset Password Modal: There is no excessive space beneath the labels.
   I have uploaded a screenshot to confirm these changes.

[saurabhshetty29]

Suggest adding a margin for tabs that wrap to the second line and changing the color of the 'Search' and 'Show' tabs for better visibility. Everything else looks good!

[SFA23SCM35V]

I have tested the PR and confirmed that the following changes are functioning as expected:

• Spacing: Adequate spacing is provided to the right of the "Show" button.
• Search Input Size: The search input size is appropriate for screen widths of 641px and 491px.
• Top Items Alignment: Proper spacing and left alignment between top items are maintained at 375px.
• User Table Font Size: The font size in the user table decreases appropriately after 750px.
• Invitation History Modal Setup: The modal uses a bordered table, and placeholders are present in the Email input field.
• New User Modal Setup: The placeholder text is fully visible at 375px.
• Reset Password Modal: There is no excessive space beneath the labels.

I have also uploaded a screenshot to confirm these changes.

[SFA23SCM35V]

[Abhinav-Ankur786]

It is getting resized and it works as per PR

[Shreyav2000]

Tested the changes, and everything works as expected.

Spacing, alignment, and font size adjustments are perfect across various screen widths.
Modals, placeholders, and table borders display correctly.
Great job on the UI fixes!

Screen.Recording.2024-09-13.at.9.20.52.PM.mov

[geetamatkar]

Hi @suaniii ,
I tested this PR and everything is working as expected.

• Search input size is appropriate at screen widths around 641px and 491px.
• There is proper spacing and left alignment between top items at 375px.
• User table font size reduces after 750px to minimize side scrolling.
• Setup invitation history modal uses a bordered table and includes placeholders in Email input.
• Placeholder text is fully visible in the Setup New User modal at 375px.
• Reset password modal does not have excessive space beneath the labels.

I have one suggestion, if there is proper margin spacings between all buttons under user management, it will look better.

[nishitag5]

The changes work as described.

Recording.2024-09-14.171206.mp4

[suaniii]

Code changes works as expected. As a suggestion, there can be margin space between the search and show buttons. Rest everything works as expected.

PR.2583.mov

Added space, please review again.

[suaniii]

I have reviewed the changes and everything is working fine and has been approved. However, I noticed there is no space to the right of the "Show" button. Could this be adjusted?

The search input size is appropriate to the screen width 641px and 491px

At 375px, lack of space between the rows and for smaller screens from 819px

Setup invitation modal history uses the table and has input placeholder for email

Reset password button does not have excessive space beneath the labels

Added space, please review again.

[suaniii]

Show does not have space near the search. Works fine for search input size is appropriate at screen widths around 641px and 491px.

there is proper spacing and left alignment between top items at 375px.

user table font size reduces after 750px to minimize side scrolling.

everything alings perfectly

Added space, please review again.

[suaniii]

zhiminV

Added space, please review again.

Fixed.

[honglinchen0524]

Great work! All features work as intended.

PR2583.mp4

[bhavya17prakash]

Reviewed Changes. Works as Expected.

404450608-bb211543-09d7-4e64-bc30-936bc01da301.mp4

[HarideepValiveru]

Reviewed PR. The code is well-organized and covers a lot of functionality like managing users, permissions, modals, and UI updates. It works as expected

[myeeli]

I have checked out the PR. Although all the functionalities are working as expected , while clicking on reset password i could see the field names are displayed twice, as you can see in the last picture. Also, i could see some display statements and warnings are getting displayed in the console when navigated to the user management screen.

[suaniii]

I have checked out the PR. Although all the functionalities are working as expected , while clicking on reset password i could see the field names are displayed twice, as you can see in the last picture. Also, i could see some display statements and warnings are getting displayed in the console when navigated to the user management screen.

Thanks for the feedback. The duplicate field names issue has been fixed.