[WEB-5506] regression: navigation revamp bugs

[aaryan610]

Description

This PR fixes the following bugs-

1. Horizontal navigation bar visible in work item details page even when accordion is enabled.
2. No padding for home page when both the sidebars are open.

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

• New Features

  • Header navigation now respects project navigation preferences and displays only in the horizontal mode.

• Style

  • Adjusted home page spacing for large screens.
  • Simplified top navigation padding behavior to standardize horizontal spacing.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5506] New navigation pre release bugs

This comment was auto-generated by Plane

[coderabbitai]

Walkthrough

Adds a project navigation preference gate to a work item header, simplifies a home layout class by removing a large-screen breakpoint, and normalizes padding logic in the CE top navigation container.

Changes

Cohort / File(s)	Summary
Navigation Preference Gating apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx	Introduces useProjectNavigationPreferences, reads projectPreferences, and conditionally renders the header block only when projectPreferences.navigationMode === "horizontal". Existing DOM and issue lookup logic preserved.
Responsive Styling Simplification apps/web/core/components/home/root.tsx	Removes cn import and replaces dynamic className with a direct string, dropping the lg:px-0 breakpoint from the ContentWrapper class list.
Top Navigation Padding Change apps/web/ce/components/navigations/top-navigation-root.tsx	Removes the conditional addition of px-3.5 in the container className, leaving base px-3.5 and the conditional px-2 when showLabel is false; no other logic changes.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant Page as WorkItemPage
  participant Hook as useProjectNavigationPreferences
  participant Header as WorkItemHeader

  Page->>Hook: request projectPreferences
  Hook-->>Page: returns { navigationMode }
  alt navigationMode == "horizontal"
    Page->>Header: render header (navigation DOM)
    Header-->>Page: header rendered
  else navigationMode != "horizontal"
    Page-->>Header: do not render header
    Note right of Page: Header block is skipped
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Verify useProjectNavigationPreferences hook existence and return shape.
• Confirm conditional rendering covers all header variants and no side effects occur when skipped.
• Check layout impact from removal of lg:px-0 in home/root.tsx across large screens.
• Ensure className change in top-navigation-root.tsx doesn't affect spacing when showLabel toggles.

Poem

🐰 I peeked at prefs and took a hop,
If not horizontal, the header stops.
One breakpoint gone, padding made plain,
Clean lines hop forward across the plane. ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title clearly identifies the main change as bug fixes related to navigation revamp issues, which aligns with the actual changes made to fix horizontal navigation and padding problems.
Description check	✅ Passed	The description covers the main required sections: a clear description of the two bugs being fixed and the type of change (bug fix). However, it lacks screenshots/media, detailed test scenarios, and issue references.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/navigation-bugs

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6f11f67 and b2df838.

📒 Files selected for processing (1)

• apps/web/ce/components/navigations/top-navigation-root.tsx (0 hunks)

💤 Files with no reviewable changes (1)

• apps/web/ce/components/navigations/top-navigation-root.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR fixes two navigation UI bugs related to the navigation revamp feature. The changes ensure proper padding behavior on the home page and correct visibility of the horizontal navigation bar based on user preferences.

• Removes conditional padding override that was preventing proper spacing when both sidebars are open
• Adds conditional rendering to hide horizontal navigation in work item details when accordion mode is enabled

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
apps/web/core/components/home/root.tsx	Removes lg:px-0 class and unused cn import to fix padding issue on home page when both sidebars are open
apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx	Adds conditional rendering based on navigationMode preference to hide horizontal navigation bar when accordion mode is enabled

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.