Broken Header Fixed: #104
Merged
Broken Header Fixed: #104
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Fixed Header overlap issue: - Changed Header position from 'sticky' to 'fixed'. - Added 'pt-16' to main container in App.tsx to push content below the header. - Refactored Header Layout for loose fit: - Removed 'max-w-7xl' and 'mx-auto' constraints. - Set container to 'w-full' with increased horizontal padding (px-6/px-12). - Increased spacing between navigation items and action buttons.
Contributor
Author
|
Closes :#102 |
|
Greate Work @Krishdshah |
Contributor
Author
|
Please merge the pr #104 |
1 similar comment
Contributor
Author
|
Please merge the pr #104 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📄 Description
This PR resolves a critical UI bug where page content was overlapping with the navigation header and refactors the global layout for a cleaner, full-width appearance.
Key Changes:
Fixed Header Overlap: Switched the Header to fixed positioning and added pt-16 (64px padding) to the main container in App.tsx. This ensures content starts exactly below the header instead of hiding behind it.
Layout Expansion: Removed the centered container (max-w-7xl) from the navbar. The header now spans the full width of the viewport (w-full) with increased padding and spacing between elements for a "loosely fit" design.
Typography Fix: Corrected the "Can I Try This?" logo text alignment using leading-none. The subtitle no longer bleeds out of the header container.
🔗 Related Issues
Fixes #header-overlap-ui (or insert specific issue number if you have one)
🧩 Type of Change
[x] 🐛 Bug Fix
[ ] ✨ New Feature
[x] ⚡ Enhancement / Optimization
[ ] 🧾 Documentation Update
🖼️ Screenshots (if applicable)
(You can upload the "Before" (overlapping) and "After" (clean spacing) screenshots here)
✅ Checklist
[x] I have performed a self-review of my code.
[x] I have tested my changes locally.
[x] My changes do not break existing functionality.
[x] I have linked all related issues (if any).
💬 Additional Notes (Optional)
The header is now anchored to top-0 left-0 with a z-index of 50. The layout is responsive, but the loose spacing is primarily targeted at desktop/tablet (md and lg) breakpoints.