feat: improve navbar responsiveness across all device sizes #1295

[Tarulatapriya]

Description

This PR addresses issue #1295 by completely revamping the responsiveness and structural layout of the main navigation bar, ensuring proper alignment on all viewports down to 320px width.

Fixes Made:

• Relocated Floating Elements: Moved the independently floating "Star on GitHub" link out of page.tsx and properly embedded it into the flexbox layout of the <header> in layout.tsx. This eliminates the severe overlapping bug on narrow screens.
• Improved Flexbox Layout: Refactored the header to use scalable gaps and padding (px-4 sm:px-6) with flex-shrink-0 to ensure items never clip out of bounds.
• Smart Mobile Scaling: Instead of over-engineering a hamburger menu for a single link, the GitHub link elegantly collapses the text on mobile viewports while retaining the "⭐" icon, seamlessly preserving usability and maximizing screen real estate for devices down to 320px.

Related Issues

Closes #1295

Type of Change

• UI/UX improvement (responsive design)
• Bug fix (resolves overlapping layout)

Additional Notes

• Contributing under GSSoC 2026.

[github-actions]

👋 Thanks for your PR, @Tarulatapriya!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[github-actions]

✅ PR Format Check Passed — @Tarulatapriya

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[Tarulatapriya]

Hey maintainers! 👋

I've just submitted a PR to fix the navbar responsiveness across all devices (Issue #1295) as part of GSSoC '26!

Here is a quick breakdown of what I changed using minimal Tailwind CSS, as requested:

Integrated the Layout: I moved the floating "Star on GitHub" link out of page.tsx and directly into the

flex container in layout.tsx. This permanently fixes the overlapping bug on smaller screens!
Proper Scaling: Added flex-shrink-0 constraints and optimized the horizontal padding (px-4 sm:px-6) so everything fits flawlessly.
Smart Mobile UI: Instead of adding a complex, JavaScript-heavy hamburger menu just for a single link, I made it so the text "Star on GitHub" collapses automatically on tiny mobile viewports, leaving just the star icon visible. This scales perfectly down to 320px screens!
Let me know if this looks good to merge or if you need any adjustments! 🚀