fix(ui): restore z-20 on main panel header to prevent popover clipping

[jSydorowicz21]

Summary

• Restores z-20 on the main panel header container that was removed in commit 4d01c32e (fix: remove main header z-index, Apr 9 2026)
• Fixes the Context Details popover being rendered behind the chat / AI log area when clicking the CONTEXT button
• One-line change in src/renderer/components/MainPanel/MainPanelHeader.tsx

Regression details

The Context Details popover inside the header is declared as:

<div className="absolute top-full right-0 pt-2 w-64 z-50 pointer-events-auto">

Its local z-50 only ranks it among siblings inside the header's stacking context. Before 4d01c32e, the header container itself carried z-20, which established a stacking context elevated above the sibling main content area. After that commit, the header no longer creates a stacking context, so when the popover drops below the header's 64 px height (top-full), it is rendered underneath the positioned chat / AI log view.

Symptom: clicking the CONTEXT button shows only the very top of the "Context Details" panel at the edge of the header; the rest of the popover is hidden behind the chat area.

Restoring z-20 on the header re-elevates the header's stacking context so its absolute descendants render above the sibling main content area, matching the pre-April-9 behavior. The tooltip's own z-50 remains, so nothing else regresses.

Test plan

• Open the app, start any AI session
• Click the CONTEXT button in the top header
• Verify the full Context Details popover renders above the chat area (Input Tokens, Output Tokens, Cache rows all visible)
• Hover away and confirm the popover dismisses cleanly
• Confirm the header itself still renders in the expected position and no other elements are visually affected by the restored z-20

Alternative considered

A more robust long-term fix would be to render the popover via a React portal so it escapes all parent stacking contexts. That is a larger change and out of scope for this regression fix, but is the recommended direction if similar issues surface for other in-header popovers.

Summary by CodeRabbit

• Bug Fixes
  • Fixed the main panel header's stacking order to ensure it displays at the correct layer relative to other elements on the screen.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: bd1a604e-cf62-453f-98ad-417c34a351da

📥 Commits

Reviewing files that changed from the base of the PR and between b34f55a and 87d0a43.

📒 Files selected for processing (1)

• src/renderer/components/MainPanel/MainPanelHeader.tsx

---

📝 Walkthrough

Walkthrough

Updated the MainPanelHeader component's root <div> className by adding the z-20 Tailwind utility class, adjusting the stacking context to increase overlay precedence for the header container relative to other positioned elements.

Changes

Cohort / File(s)	Summary
Header Stacking Context src/renderer/components/MainPanel/MainPanelHeader.tsx	Added z-20 utility class to the root div's className, elevating the header's z-index layer.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• [codex] Polish slash commands, PlayBooks labels, and sidebar menu layering #769: Directly related z-index modification to header stacking order; this PR adds z-20 while the referenced PR removed it, suggesting a reversal or correction of prior stacking changes.

Poem

🐰 A header hops to the top with pride,
With z-20 it won't hide,
Above the layers, bold and bright,
Stacking context set just right! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: restoring z-20 on the main panel header to fix popover clipping, which directly matches the single-line change in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[greptile-apps]

Greptile Summary

Restores z-20 to the header-container div in MainPanelHeader.tsx, re-establishing the header's stacking context above the main content area. This is a one-line regression fix for the Context Details and git popovers being clipped behind the chat/AI log view after commit 4d01c32e removed the z-index.

Confidence Score: 5/5

Safe to merge — single-line regression fix with a clear root cause, verified fix rationale, and no new code paths introduced.

The change is exactly one class token restored to a single element, matches a well-documented regression, and all remaining findings are non-blocking style notes. No logic, data, or security concerns.

No files require special attention.

Important Files Changed

Filename	Overview
src/renderer/components/MainPanel/MainPanelHeader.tsx	Restores z-20 to the header container div, re-elevating the header's CSS stacking context so absolute-positioned descendants (context details and git popovers with z-50) render above sibling main content.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["MainPanel (layout root)"]
    A --> B["header-container\n(relative z-20) ← restored"]
    A --> C["Main content area\n(chat / AI log view)"]
    B --> D["Git tooltip\n(absolute top-full z-50)"]
    B --> E["Context Details popover\n(absolute top-full z-50)"]

    style B fill:#22c55e,color:#fff
    style D fill:#3b82f6,color:#fff
    style E fill:#3b82f6,color:#fff
    style C fill:#6b7280,color:#fff

Loading

_{Reviews (1): Last reviewed commit: "fix(ui): restore z-20 on main panel head..." | Re-trigger Greptile}