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]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

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: 1d501d51-0fb9-4733-bb53-ae7385c3bf36

📥 Commits

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

📒 Files selected for processing (1)

• fern/docs.yml

Included review availability: Your plan provides up to 12 included reviews per hour; 11 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 bc9ae

The change may not fix the footer overlap on the generated documentation site if the NVIDIA theme replaces the configured custom CSS. The PR is otherwise localized, but the theme integration should be verified or adjusted with owner awareness.

Suggested reviewers: yuanchen8911

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the primary change: fixing the footer overlap with the sidebar.
Description check	✅ Passed	The description directly explains the footer overlap bug, the CSS and configuration changes, and the visual testing performed.
Linked Issues check	✅ Passed	The changes address issue #2258 by applying a theme-matching solid background, positioning, and z-index to the Fern footer and loading the stylesheet globally.
Out of Scope Changes check	✅ Passed	All changes are limited to the custom Fern stylesheet and its documentation configuration, which directly support the linked issue.

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

[pdmack]

This is fixed in the fern theme.
Checked against aicr and nvcf.
Please confirm.