Amaan taking over for Peterson - Improve button layout for responsive design - #4711
Conversation
peterson337
added
the
do not review
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
one-community
added
High Priority - Please Review First
AmaanSyed09
changed the title
- Fix header layout overflow and visibility issues on small screens - Prevent navbar from disappearing after React hydration (collapse issue) - Improve responsive spacing and alignment across header sections
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Fix responsive header and button layout issues at ~916px breakpoint
Before: PR.4711.before.movAfter: PR.4711.demo.mov |
HemanthNidamanuru
left a comment
HemanthNidamanuru
left a comment
There was a problem hiding this comment.
Hi Amaan,
I tested this PR locally.
The Permission Management page is working fine, and the responsive button layout is behaving as expected when reducing the browser width. The buttons move properly below the list.
The header is also working fine now, and the navbar/header content stays visible without overlapping or getting cut off.
PR.4711.mov
kzou55
left a comment
kzou55
left a comment
There was a problem hiding this comment.
Hi Amaan,
I ran and tested the PR locally.
Verified
- Responsive screen even as screen size is decreasing
- The buttons stay aligned and visible as they go underneath the components
- THe navbar tab doesn't overlap
Recording.2026-07-12.000434.mp4
Issue
-
Not sure what happened on my end, but I don't see a log table underneath the User Roles component.
|
Hi @kzou55 |
…design, manually resolve Header, OwnerMessage, and Permissions Management merge conflicts, and preserve responsive layout behavior
|
Hi Amaan, I realized(thought I checked both last time), but I just rechecked again and I can actually see the log table when I'm in my owner account. It's only when I'm in admin I don't see the log table. Is that intended? |
|
Re-reviewed the PR and merged the latest development branch into this feature branch. Resolved all merge conflicts in the Header, OwnerMessage, and Permissions Management components, preserved the intended responsive behavior, and addressed the responsive layout regression that appeared during the merge. Re-tested the affected functionality across desktop and mobile viewports, verified the Permissions Management page and navigation behavior, and confirmed the previously reported issue could not be reproduced with the backend running on the latest development branch. This PR is ready for another review. |
|
Hi @kzou55 I followed the original PR instructions, which specify testing with the Dev Admin account. Based on those instructions, I verified the implementation using that account and confirmed the functionality described in the PR. The difference in behavior between the Owner and Admin accounts wasn't mentioned in the original issue or PR description, so I left that behavior unchanged. |
|
Hi @AmaanSyed09 , Just to double check/clarify, you can see the log table when you're in your Admin account? Because I can't see it when I'm in my admin account but can when I'm in my owner account. I originally tested on my admin account following the original testing instruction. |
|
Hi @kzou55 Yes, that's what I observed as well. The log table is visible for the Owner role but not for the Admin role. I didn't change any permission access in this PR, so that behavior remained as it was before. While testing, I initially used an Owner account and was able to change the role to Administrator. After switching to Administrator for testing, I wasn't able to change it back to Owner. Is there a recommended way to restore the Owner role for testing? If possible, could you also change my account back to the Owner role? I currently no longer have permission to do that myself. Thanks! 
|
|
Hi @AmaanSyed09 and @kzou55, I checked out this PR and tested it locally to help clear up the bottlenecks and move this review forward. 1. The Log Table Issue (Admin vs. Owner)@kzou55 I can confirm that I do not see the log table when logged in as an Admin either. Amaan is correct here—this is existing backend permission behavior on the 2. Mobile Layout Regressions (Surface Duo / 540px Viewports)While the desktop and tablet adjustments look solid, the new CSS rules introduce a layout breaking bug on smaller mobile viewports (see image_6d5922.png):
3. Restoring Owner Role for Testing@AmaanSyed09 to get your account back to an Owner role for local testing, you don't have to wait for someone to change it in the UI. You can manually update your local database:
Once the mobile menu layout and spacing on smaller viewports are cleaned up, this will be ready for a final green light! |
iAbhi001
left a comment
iAbhi001
left a comment
There was a problem hiding this comment.
Hi @AmaanSyed09 and @kzou55,
I checked out the branch and tested it locally to help clear up the bottlenecks regarding the UI layout and the log table.
1. The Log Table Issue (Admin vs. Owner)
@kzou55: I can confirm that the log table is completely hidden when logged in as an Admin, but it is visible when logged in as an Owner. This matches the native behavior of the current backend development branch. Amaan is correct here—this is controlled by pre-existing role-based permission rules on the backend, not a visual layout bug introduced by this PR.
2. Mobile UI Layout Regressions (Surface Duo / 540px Viewports)
While the structural fixes look great at the larger 916px breakpoint, testing on a smaller mobile layout width of 540px (such as the Surface Duo) reveals two critical UI regressions when the navigation menu is expanded (refer to image_6d5922.png):
- Navigation Menu Overlay: The expanded mobile dropdown menu uses a layout setting that forces it to sit directly on top of the user roles table rather than dynamically pushing the rest of the page document flow downward. This completely blocks viewability and access to the top portion of the table elements.
- Inline Text Compression: Inside the expanded dark navigation card, the primary links (
Task Edit Suggestion (2),Dashboard,Timelog,Reports) are entirely compressed together into a single horizontal string of text. The menu items lack the necessary flex-direction, list-stacking structure, margins, or horizontal padding required to render cleanly on narrower viewports.
For More Details and Screenshots, Read my Original Comment in the Conversation
HemanthNidamanuru
left a comment
HemanthNidamanuru
left a comment
There was a problem hiding this comment.
Hi Amaan,
I retested this PR locally.
At smaller screen widths, the navigation menu appears cramped and overlaps the User Roles table. I also noticed that the header structure has changed compared with the previous version.
Additionally, there is unusual responsive behavior between 1199 px and 1200 px. At this breakpoint, the header layout changes suddenly and displays a large empty dark area, causing the navigation and profile elements to appear misaligned.
Could you please review the header and navigation responsiveness across these screen widths?
|
Addressed the requested responsive layout updates for the Permissions Management page and pushed the latest changes. Changes made:
Testing performed:
Please let me know if any additional adjustments or edge cases should be addressed. PR.4711.demo.mov |
|
Addressed the remaining SonarQube issues and pushed the latest changes. Changes made:
|
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
Tested the PR locally and the permission management page loads as expected in different responsive dimensions.
The buttons that are beside the list move below the list as expected.
iAbhi001
left a comment
iAbhi001
left a comment
There was a problem hiding this comment.
Hi @AmaanSyed09,
I tested this PR locally across different responsive dimensions.
Verified that the Permission Management page loads and behaves as expected across various screen sizes.
Confirmed that the buttons beside the list cleanly wrap and move below the list when reducing the viewport width.
Everything looks good on my end! Approving the changes.
kzou55
left a comment
kzou55
left a comment
There was a problem hiding this comment.
Hi Amaan,
I ran and tested the PR locally again.
Verified
-
Reducing the browser window causes the buttons that are beside the list should move below the list.
https://github.com/user-attachments/assets/a8d39a24-0fd3-4f39-95d0-f9689929adaa -
Looks good in Mobile View
944b1de
|
|
Merged the latest development into this branch, resolved the merge conflict in |
|
Thank you all, merging! |
7 participants
Description
This PR was opened to implement an improvement in the layout of user permission management.
Related PRS (if any):
None.
Main changes explained:
The PermissionsManagement.module.css component has been modified to fix the bug.
How to test:
npm installand...to run this PR locallyScreenshots or videos of changes:
Uploading After my fix.mp4…
Note:
None.