Julia - Fix the responsiveness of the Header on mobile devices

[JuliaHa0902]

Description

This is a part of Bug 49: Fix and improve functionality of app on phones. This PR only focuses on the header.
Improve the mobile responsiveness of the Header in the main dashboard, Community Portal, and Building Management Dashboard, so that it works better on tablets and mobile devices. I also fix some bugs related to the Header, such as Notification Bell doesn't show/randomly disappear in Community Portal, close menu dropdown when clicking outside of the menu or clicking on the menu again, close the Notification Bell by clicking on the bell again.

Related PRS (if any):

This frontend PR is related to the development backend PR.

Main changes explained:

Editing CSS file of Header and CPHeader to make sure the header appears properly in all devices.

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 in using different types of user
5. go to the main dashboard
   In Big screen

• Verify that the owner message is properly centered
• Verify that the dropdown properly shows and is not cut off
  In small laptop screen
• Verify that the owner message disappear
• Verify that the menu doesn't split in 2 lines when the screen get smaller
  In mobile and tablet screen
• Verify that the menu collapsed
• Verify that the menu item is left-aligned, and each item is on its own line
• Verify that the text is readable in both dark mode and light mode
• Verify that the second dropdown will stay inside the navbar
• Verify that the bell stays outside of the main dropdown
• Verify that the Task Edit Suggestion button (The red circle button on the big screen) matches the style of other items in mobile view.
• Verify that clicking outside of the menu will close the menu
• Verify that clicking on the menu icon will toggle opening and closing the menu
• Verify that clicking on the Bell icon will toggle opening and closing the notification modal

6. Test the same thing in Community Portal (http://localhost:3000/communityportal/) and Building Management Dashboard (http://localhost:3000/bmdashboard)

• Test all of the above, and ensure the Notification Bell icon shows.

Screenshots or videos of changes:

Screen.Recording.2025-05-07.224235.mp4

Screen.Recording.2025-05-07.224742.mp4

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	9f33628
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69505c930ddf470008562ae8
😎 Deploy Preview	https://deploy-preview-3495--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 project configuration.

[mvreddy13]

✅ Approved

I’ve tested header responsiveness and functionality across all target views:

• Big desktop

  • Owner message centered
  • Dropdown menus fully visible

• Small laptop

  • Owner message hidden
  • Menu stays on one line

• Tablet & Mobile

  • Menu collapses into hamburger
  • Items left-aligned, one per line
  • Text legible in dark & light modes
  • Secondary dropdown stays within navbar
  • Notification bell remains outside main menu
  • “Task Edit Suggestion” button styling matches

• Interactions

  • Clicking outside menu closes it
  • Toggling menu and bell icons open/close correctly

✅ All header behaviors now work as expected on Main Dashboard, Community Portal, and Building Management Dashboard.

No changes required

2025-05-13.12-20-40.mp4

[beblicarl]

This functionality works as intended and the code is good

https://www.loom.com/share/04775e9466e74b1b81e71d4b6953e0f6?sid=7ca4aec7-6fb1-4ff7-9eb9-71e3fad402e5

[npolasani]

Checked out the current branch and ran the application locally.
Logged in as different users and tested the changes.

The header is responsive for different device sizes and everything works as mentioned. Header looks good in both light and dark modes. Approving the PR.

Recording.2025-05-15.200251.mp4

[sonarqubecloud]

Quality Gate passed

Issues
18 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.1% Duplication on New Code

See analysis details on SonarQube Cloud

[one-community]

Thank you all, merging!

[sonarqubecloud]

Quality Gate passed

Issues
15 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud