fix: footer overlap in sidebar

[Pranav-IIITM]

Summary

Added a custom CSS file to the Fern documentation configuration to fix a visual bug where the transparent footer overlapped with the left navigation sidebar.

Motivation / Context

When scrolling down the documentation pages, the left navigation sidebar text was bleeding through the transparent footer, making both unreadable. Applying a solid background with a proper z-index fixes this visual overlap in both light and dark modes.

Fixes: #2258
Related: NVIDIA/nvcf#818

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• Documentation update

Component(s) Affected

• Docs/examples (docs/, examples/)
• Other: fern/

Implementation Notes

• Created fern/custom.css with CSS overrides ensuring a solid background for footer.bd-footer and #fern-footer in both light and dark mode.
• Linked custom.css globally within fern/docs.yml.

Testing

• Visually tested layout overlaps using Chrome DevTools on the live docs site (simulated both Light and Dark modes).

In Dark theme	In light theme

[copy-pr-bot]

This pull request requires additional validation before any workflows can run on NVIDIA's runners.

Pull request vetters can view their responsibilities here.

Contributors can view more details about this message here.

[github-actions]

Welcome to AICR, @Pranav-IIITM! Thanks for your first pull request.

Before review, please ensure:

• All commits are signed off per the DCO
• CI checks pass (tests, lint, security scan)
• The PR description explains the why behind your changes

A maintainer will review this soon.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 09eb34e3-c7bf-4563-92a7-3a540d45bd61

📥 Commits

Reviewing files that changed from the base of the PR and between 735a311 and ddb279e.

📒 Files selected for processing (2)

• fern/custom.css
• fern/docs.yml

Included review availability: Your plan provides up to 12 included reviews per hour; 10 remain after this review.

---

📝 Walkthrough

Walkthrough

Adds a theme-aware background, relative positioning, and stacking order to #fern-footer. Adds an Apache 2.0 license header to custom.css. Configures the documentation site to load custom.css.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Merge Risk: 🔵 Low · up to ddb27

The change may not fix the sidebar overlap if the documentation build omits the new stylesheet under the active theme. The PR is otherwise mergeable, but the owner should confirm that custom.css is present in the generated docs.

Suggested reviewers: yuanchen8911

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the footer overlap fix implemented in the documentation site.
Description check	✅ Passed	The description accurately explains the documentation CSS fix, its motivation, affected component, and testing.
Linked Issues check	✅ Passed	The changes address issue #2258 by adding a themed footer background and stacking order to prevent sidebar content overlap.
Out of Scope Changes check	✅ Passed	The stylesheet and docs configuration changes directly support the linked footer overlap fix, with no unrelated code changes.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[github-actions]

🌿 Preview your docs: https://nvidia-preview-fix-docs-footer-overlap.docs.buildwithfern.com/aicr

[pdmack]

We are investigating if our fern theme needs a fix.

[njhensley]

🔍 Multi-persona review — footer overlap fix

Method: 3 independent persona reviewers (CSS/Fern-correctness · CI-DX/verification · Docs-UX/robustness) → adversarial senior meta-reviewer re-derived every finding from the resolved code, grounded against the official Fern docs (the css key + theming model). All 7 findings confirmed; none refuted.

Tier legend: 🔴 Blocker · 🟠 Major · 🟡 Minor · 🔵 Nitpick

Overall assessment

The core fix is correct and well-scoped. Painting an opaque, theme-adaptive var(--background) onto a footer that sidebar text was bleeding through is the right remedy, and a CSS override is the correct layer — Fern's colors: config can't add a background/z-index to a specific element. It will pass CI (no CSS linter; fern check validates the css: key; the publish-time yq surgery is scoped to .products[0].versions and doesn't touch it).

The one substantive note is that ~13 of the 20 lines are dead or duplicate: because Fern's --background variable already adapts to light/dark and Fern toggles dark mode via the .dark class (not prefers-color-scheme, not data-theme), the entire dark-mode section is inert or redundant and the file collapses to a single rule. Nothing here is a visual bug — the unreachable hex fallbacks can't misfire — but the redundancy misleads future maintainers. See inline comments for the specifics.

Confirmed non-issues (examined, not problems)

• css: custom.css is a valid Fern docs.yml key and the file exists — fern check validates it.
• publish-fern-docs.yml yq surgery won't clobber the top-level css: key.
• The .dark #fern-footer descendant combinator is correct — lines 13-20 are redundant, not broken.
• No doc update required — pure cosmetic CSS, no enumerated user-visible behavior.

Process notes (not code defects)

• Branch is behind main; the repo enforces up-to-date branches, so it needs git fetch origin main && git rebase origin/main before merge.
• fern/** non-.md edits set code=true in the merge gate, so the full qualification suite runs on this cosmetic PR (expected to pass).

Summary

🔴 Blocker	🟠 Major	🟡 Minor	🔵 Nitpick	Recommendation
0	0	3	4	Approve with comments

Highest-leverage single action: collapse the file to the one rule above and confirm it on the Fern preview build — that resolves the top three findings at once.

Automated multi-persona review; every finding was independently re-derived by a senior meta-reviewer before inclusion.

[yuanchen8911]

The deployed preview still reproduces the reported footer overlap because the new stylesheet is discarded during global-theme stitching. Please address the inline finding before merge.

[Pranav-IIITM]

Thanks for the detailed reviews, @njhensley and @yuanchen8911!

I've pushed a new commit to address the initial feedback:

• Simplified CSS: Stripped out the dead @media queries, data-theme selectors, and hex fallbacks. The CSS is now just the single #fern-footer rule relying purely on var(--background).

• License: Added the standard NVIDIA Apache-2.0 copyright header to fern/custom.css.

Before I make any further changes, what is the recommended way to inject this CSS so it composes with (or bypasses) the global-theme: nvidia override? Should this override be upstreamed into the global theme itself, or is there a specific Fern configuration pattern we should use here?

Let me know the preferred approach and I'll get it updated!

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.