Fixes #1798 : Home page UI layout broken on mobile viewports & duplicate hamburger menus

[Shrutiii01]

This PR addresses and completely resolves [Bug]: Home page UI layout broken on mobile viewports & duplicate hamburger menus #1798.

By untangling legacy media query blocks, structural layout failures have been fixed, and redundant mobile UI layout controls have been delegated natively back to the primary site navigation architecture.

Additionally, this PR tracks the continuous integration process executed through the squashed/merged development pipeline (Shrutiii01/Develop) to finalize stability across targeted ultra-small viewports.

---

🚀 Key Changes Implemented

1. 📱 Core Mobile Spacing & Flex Grid Alignments (Commit: 2f41642)

• Fixed Block Query Corruption: Identified and corrected a major unclosed brace nesting bug within enhanced-footer.css that broke layout queries on devices narrower than 768px.
• Whitespace Gap Reduction: Converted the footer hero area into a flexible layout column with tight vertical margins. This explicitly pulled the primary CTA actions ("Read Blog" / "Star on GitHub") out of horizontal clipping boundaries and kept them closely bound to the text header.
• Typography Sizing Optimization: Adjusted text element weights, scaled h1 headings down to 19px/20px on Mobile S viewport constraints (320px), and permitted smooth word wrapping to completely halt breaking width thresholds.

2. 🍔 Native Menu Consolidation & Clutter Removal (Commits: 425618a, 1f5e855)

• Eliminated Floating Elements Overlay: Completely hid the custom violet panel overlay button (.dashboard-menu-btn) and drawer code using forced absolute styling states (display: none !important;). This thoroughly resolves the UX overlap failure where two separate hamburgers stacked directly above one another on mobile viewports.
• Main Content Margin Correction: Rebalanced structural padding constraints on the workspace panel wrapper element (.dashboard-main-content) back to fluid vertical baselines, improving overall layout readability.
• Main Menu Delegation: Moved internal category pathways natively into the master global navigation tree layout, letting Docusaurus smoothly organize routing from a singular, centralized control point.

---

🔍 Verification & Code Metrics

• Clean Dev Stream Integration: Merged and verified features cleanly into the master staging branches (Commit: b6ac2de).
• Code Optimization: Excised 1,681 lines of redundant layout instructions, obsolete absolute container logic, and overlapping mobile drawer markup to guarantee a lighter client-side footprint and blazing fast performance.
• Cross-Device Testing Passes:
  • Desktop (1200px+): Layout states maintain original design parity.
  • Mobile Frame Limits (320px - 480px): Zero overlapping nodes, zero layout truncation, and flawless typography flow.

---

Checklist

• All style choices strictly scoped under parent modules to prevent class bleeding.
• Self-reviewed the rendering paths against simulated responsive screens down to 320px.
• Verified zero text elements or anchors slide beneath sticky headers.
• Merged and validated the codebase tracking metrics cleanly.

updated.mp4

[vercel]

@Shrutiii01 is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

1. Get free Consultation use code recode50 to get free: Mentorship for free.

2. Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.

3. Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[github-actions]

✅ Synchronized metadata from Issue #1798:

• Labels: level 1, recode, Enhacement, level2, gssoc:approved, type:docs
• Milestone: recode:launch 3.0

[Adez017]

@sanjay-kv need a view here

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
recode-website	Ready	Preview, Comment	Jun 2, 2026 11:53am

[sanjay-kv]

can you fix the footer conflicts and attach a screenshot please

[Shrutiii01]

FIXED

[Shrutiii01]

Ok , I will fix this my today

[github-actions]

✅ Synchronized metadata from Issue #1798:

• Labels: level 1, recode, Enhacement, level2, gssoc:approved, type:docs
• Milestone: recode:launch 3.0

[Shrutiii01]

[github-actions]

✅ Synchronized metadata from Issue #1798:

• Labels: level 1, recode, Enhacement, level2, gssoc:approved, type:docs
• Milestone: recode:launch 3.0