pavanswaroop-added-role-icons-reduced-header-searcheditor-tablecolumn-widths

[pavanswaroopl]

Description

Reduce “Role” column and fix changing column widths on User Management page (WIP Pavan)
Admin Login → Other Links → User Management
Make the “Role” Column as narrow as possible. There are only a few roles, so we could turn those into icons instead of words, if needed to make it even narrower.

Related PRS (if any):

This frontend PR is not related to the any backend PR.
…

Main changes explained:

• Added the icons that are most suitable for each role from existing icon packages.
• Reduced width of editable fields in the role names displayed.
• Reduced role column filter dropdown width to be centered in the column
  …

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→ UserManagement
6. verify functions mentioned above

Screenshots or videos of changes:

Screen.Recording.2025-03-14.at.9.05.07.PM.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	cfcbd38
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/67d4e6997020460008bc93f7
😎 Deploy Preview	https://deploy-preview-3276--highestgoodnetwork-dev.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.

[vikasreddynomula]

Unable to see the changes when the role is overflown

[Akhilguntur2801]

I have tested this PR and couldn't see the mentioned functionalities. I tested using admin id as mentioned.

[rnavyaprabha]

I reviewed the code changes and followed the steps as mentioned. I checked into the current branch, ran npm install to install the necessary dependencies, and cleared the site data/cache. Then, I logged in as an admin user, navigated to the dashboard, clicked on "Other Links," and went to "User Management." I verified that the functions mentioned above worked as expected. Everything works fine, so I’m approving the PR. here is the screenshot

[angad363]

I reviewed the code changes and followed the steps outlined in the PR description. I checked out the current branch, ran npm install to install the required dependencies, and cleared the site data/cache. After logging in as an admin user, I navigated to the dashboard, clicked on "Other Links," and went to "User Management." I verified that all the functions worked as expected. I also went through the code, and it meets the quality standards. Additionally, I checked the responsiveness, and everything works fine across various screen sizes, as shown in the attached video. Everything is functioning as expected, so I’m approving the PR. Here is the screenshot for reference.

PR.3276.-.4.mp4

[Amalesh-A]

I review the changes and pulled your branch. I logged in as an admin, and I couldn't change/edit the fields as an admin.

[pavanswaroopl]

Unable to see the changes when the role is overflown

As per the requirement, there are only certain defined roles, hence the icons need to be assigned to them.

However, Im not able to simulate the issue you have mentioned, please include a detailed video of the issue on how to simulate