Fix header text overlap issue on smaller screen sizes

[anmolgupta2015]

Pull Request Title

Fix: Improved Header Layout & Text Wrapping for Better Responsiveness

Description

Fixes #276
This PR improves the header layout by ensuring better responsiveness and preventing text overlap. Key changes include:

• Added flex-shrink-0 min-w-0 to the Logo Section to prevent unnecessary shrinking of elements.
• Added whitespace-nowrap to text elements (Welcome text & App name) to ensure they do not wrap unexpectedly in small screens.
• Ensured the layout remains balanced and prevents misalignment on different screen sizes.

Before vs After

🔴 Before:

• Elements overlapped when the screen size was reduced.
• Text wrapped incorrectly in small screens.

✅ After:

• Improved responsiveness.
• Text and logo remain aligned properly.

Screenshots (Optional)

Checklist

• Code tested on different screen sizes.
• Changes improve user experience.
• No breaking changes introduced.
• Fixes Issue Header Text Overlap on Smaller Window Sizes #276