fix(frontend): keep chat context rail clear of app nav

[rmusser01]

Change summary

Human-authored change summary required before merge: please replace this line with the requester-owned explanation of what changed and why.

Summary

• Reposition the collapsed chat cockpit context restore tab so it anchors inside the chat cockpit shell instead of the viewport left edge.
• Update the rail positioning contract and cockpit restore tests to prevent regressions over the app-wide navigation sidebar.
• Track the fix in Backlog task TASK-12114.

Test plan

• cd apps/packages/ui && bunx vitest run src/components/Layouts/__tests__/chat-rail-positioning-contract.guard.test.ts src/components/Option/Playground/__tests__/Playground.cockpit-rail-restore.test.tsx

Bandit skipped: TypeScript UI/test-only change.

---

Summary by cubic

Switch the collapsed chat context restore tab from viewport-fixed to cockpit-scoped positioning so it stays on the chat content edge and doesn’t overlap the app navigation rail. Update the positioning contract and relax Playground tests to assert cockpit scoping and not-fixed behavior; satisfies TASK-12114.

^{Written for commit 79ea6a0. Summary will update on new commits.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 50bb18b3-d84b-42f1-ae76-794ba3dd5ef7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/chat-context-rail-nav-offset

---

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

[gemini-code-assist]

Code Review

This pull request changes the positioning of the collapsed chat cockpit context restore tab from viewport-fixed (fixed) to absolute positioning (absolute) to prevent it from overlapping with the app-wide navigation sidebar. The corresponding tests and contract guards have been updated. The reviewer suggested removing redundant assertions in the cockpit rail restore test file, as those classes are already verified by checking the COCKPIT_LEFT_RESTORE_WRAPPER_CLASS list.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[qodo-code-review]

PR Summary by Qodo

Fix chat cockpit restore tab positioning to avoid app nav overlap

🐞 Bug fix 🧪 Tests 📝 Documentation 🕐 10-20 Minutes

AI Description

• Change collapsed chat context restore tab from viewport-fixed to cockpit-scoped positioning.
• Update positioning contract + Playground restore tests to prevent nav rail overlap regressions.
• Add backlog task TASK-12114 documenting the issue, fix, and verification.

Diagram

graph TD
  A["Playground cockpit shell"] --> B["Restore tab wrapper"] --> C["COCKPIT_LEFT_RESTORE_WRAPPER_CLASS"]
  C --> D["absolute left-0 (container-scoped)"]
  D --> E["Stays clear of app nav rail"]
  F(["Contract guard test"]) --> C
  G(["Playground restore test"]) --> B

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Keep `fixed` and offset by nav width token

• ➕ Avoids reliance on a positioned parent container
• ➕ Can be resilient if the cockpit shell layout changes
• ➖ Requires a shared source of truth for nav width (CSS var/design token) and careful responsive handling
• ➖ Higher risk of drifting offsets across breakpoints

2. Use `sticky` within a scroll container

• ➕ Naturally stays within its layout context while scrolling
• ➕ Can reduce explicit positioning rules
• ➖ Sticky behavior can be unintuitive with nested overflow containers
• ➖ May not match the desired clamp-based vertical positioning

Recommendation: The chosen approach (switching the restore wrapper from fixed to absolute within the cockpit shell) is the simplest way to scope positioning to the chat area and avoid global nav overlap. It also keeps the positioning rule self-contained and is reinforced by updated contract + integration-style tests.

Files changed (4) +48 / -5

Bug fix (1) +1 / -1

chat-rail-positioning.tsSwitch restore wrapper class from 'fixed' to 'absolute' +1/-1

Switch restore wrapper class from 'fixed' to 'absolute'

• Changes the restore wrapper positioning contract to use 'absolute' instead of 'fixed' while keeping 'left-0' and the clamp-based 'top' positioning. This scopes the restore control to the cockpit shell rather than the viewport edge.

apps/packages/ui/src/components/Layouts/chat-rail-positioning.ts

Tests (2) +6 / -4

chat-rail-positioning-contract.guard.test.tsUpdate contract guard to require container-scoped restore positioning +3/-2

Update contract guard to require container-scoped restore positioning

• Renames the contract intent to explicitly avoid the app navigation rail. Updates assertions to require 'absolute' and to reject 'fixed', preventing regressions back to viewport-anchored positioning.

apps/packages/ui/src/components/Layouts/tests/chat-rail-positioning-contract.guard.test.ts

Playground.cockpit-rail-restore.test.tsxAlign Playground restore tab tests with new positioning contract +3/-2

Align Playground restore tab tests with new positioning contract

• Updates test wording and assertions to expect 'absolute left-0' on the restore wrapper and explicitly disallow 'fixed'. Keeps existing checks to prevent old offset/centering classes from returning.

apps/packages/ui/src/components/Option/Playground/tests/Playground.cockpit-rail-restore.test.tsx

Documentation (1) +41 / -0

task-12114 - Fix-chat-cockpit-context-rail-overlap-with-navigation-sidebar.mdAdd TASK-12114 backlog record for nav overlap fix +41/-0

Add TASK-12114 backlog record for nav overlap fix

• Introduces a backlog task documenting the overlap bug, the positioning change (viewport-fixed → shell-absolute), and the verification command used to validate the fix. Links the modified files for traceability.

backlog/tasks/task-12114 - Fix-chat-cockpit-context-rail-overlap-with-navigation-sidebar.md

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📜 Skill insights (0)

Context used

✅ Compliance rules (platform): 74 rules

1. Done task checklist incomplete 🐞 Bug ⚙ Maintainability

Description

TASK-12114 is marked status: Done but its Acceptance Criteria section is empty and all Definition
of Done checklist items remain unchecked, leaving the task metadata internally inconsistent.

Code

backlog/tasks/task-12114 - Fix-chat-cockpit-context-rail-overlap-with-navigation-sidebar.md[R4-40]

+status: Done
+modified_files:
+- apps/packages/ui/src/components/Layouts/chat-rail-positioning.ts
+- apps/packages/ui/src/components/Layouts/__tests__/chat-rail-positioning-contract.guard.test.ts
+- apps/packages/ui/src/components/Option/Playground/__tests__/Playground.cockpit-rail-restore.test.tsx
+---
+
+## Description
+
+<!-- SECTION:DESCRIPTION:BEGIN -->
+The collapsed left context rail restore tab in the chat Playground is fixed at viewport left and can overlay the app-wide chat navigation side rail. Add a regression test and adjust the positioning contract so the tab stays attached to the chat content edge instead of covering navigation.
+<!-- SECTION:DESCRIPTION:END -->
+
+## Acceptance Criteria
+<!-- AC:BEGIN -->
+<!-- AC:END -->
+
+## Implementation Notes
+
+<!-- SECTION:IMPLEMENTATION_NOTES:BEGIN -->
+
+<!-- SECTION:IMPLEMENTATION_NOTES:END -->
+
+## Final Summary
+
+<!-- SECTION:FINAL_SUMMARY:BEGIN -->
+Changed the collapsed chat cockpit context restore tab from viewport-fixed `left-0` positioning to absolute positioning within the chat cockpit shell. This keeps the tab attached to the chat content edge instead of overlaying the app-wide navigation sidebar. Updated the positioning contract and cockpit restore tests. Verification: `bunx vitest run src/components/Layouts/__tests__/chat-rail-positioning-contract.guard.test.ts src/components/Option/Playground/__tests__/Playground.cockpit-rail-restore.test.tsx` from `apps/packages/ui` passed (5 tests). Bandit skipped because the touched code is TypeScript UI/test-only.
+<!-- SECTION:FINAL_SUMMARY:END -->
+
+## Definition of Done
+<!-- DOD:BEGIN -->
+- [ ] #1 Acceptance criteria completed
+- [ ] #2 Tests or verification recorded
+- [ ] #3 Documentation updated when relevant
+- [ ] #4 Bandit run for touched code when applicable or document non-code/environment skip
+- [ ] #5 Final summary added
+- [ ] #6 Known skips or blockers documented

Evidence

The new TASK-12114 file shows status: Done while AC is empty and all DOD items are unchecked; an
existing Done task (TASK-12093) demonstrates the repo’s typical pattern of checked AC and DOD items
when status is Done.

backlog/tasks/task-12114 - Fix-chat-cockpit-context-rail-overlap-with-navigation-sidebar.md[1-41]
backlog/tasks/task-12093 - Fix-chat-page-left-rail-spacing-overlap.md[1-25]
backlog/tasks/task-12093 - Fix-chat-page-left-rail-spacing-overlap.md[63-71]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`backlog/tasks/task-12114 - Fix-chat-cockpit-context-rail-overlap-with-navigation-sidebar.md` is marked as Done, but it has no Acceptance Criteria items and the Definition of Done checklist is entirely unchecked.

### Issue Context
Other Done tasks in `backlog/tasks/` typically have AC/DOD items filled out and checked, which makes the task state self-consistent and easier to audit.

### Fix Focus Areas
- backlog/tasks/task-12114 - Fix-chat-cockpit-context-rail-overlap-with-navigation-sidebar.md[1-41]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---