Durga Venkata Praveen Fix: Header responsive layout and CSS module conversion

[boppanapraveen]

Description

Also includes:

From this closed PR: #4013

Related PRS (if any):

No Related PR's
…

Main changes explained:

• Flex Wrapping for Responsiveness

• Enabled flex-wrap: wrap for .timer-message-section and .navbar so header content can wrap onto new lines when the screen is narrow.

• Header Width
  Changed .header-wrapper width from clamp(100vw, 0.1rem + 1vw, 100%) to width: 100% for better scaling and to prevent overflow.
  Responsive Margins and Padding

• Added media queries to reduce .headerCard margins and .card-content paddings on screens smaller than 900px.
  Header Message Responsiveness

• In screens below 1050px, .timer-message-section switches to column layout and centers its content.
  .owner-message (the header message) is centered, uses italic font, wraps text, and is stacked below the timer, matching your desired mobile/tablet layout.
  …

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→ Tasks→ task→…
6. verify function “A” (feel free to include screenshot here)
7. verify this new feature works in dark mode

Screenshots or videos of changes:

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	947f917
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68f44c14aba24600084ca9db
😎 Deploy Preview	https://deploy-preview-4235--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.

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[hemanthvenkat]

Verified the Header: responsive layout behaves correctly across breakpoints (logo/nav alignment, menu collapse, no layout shifts), with light/dark parity.
CSS Module scoping works as intended—no style leakage, predictable class names, and consistent spacing/typography.
Overall, visuals and interactions meet spec with no console errors.

[akshith312]

Tested PR locally.
The layout is responsive and works in both light and dark modes for various screen sizes.

[beblicarl]

This responsive fix works perfectly

[Anusha-Gali]

Hi Praveen,

I have tested your PR locally and the header responsiveness works as per the functionality mentioned.

[one-community]

Thank you all, merging!