[TanmayNileshShinde]

Resolves #46

Summary of Changes

• Added optional stageClassName?: string prop to PreviewCard and PreviewComponents so documentation previews can pass custom stage height and container styling.
• Increased default fullBleed preview stage min-height to min-h-[22rem] (352px).
• Set stageClassName=min-h-[26rem] on <PreviewComponents registryName=navbar ...> in content/docs/components/navigation/navbar.mdx so the floating navbar's open language dropdown and mobile menu fit inside without being clipped by the card boundary.
• Non-fullBleed preview stages remain unaffected.

Summary by CodeRabbit

• New Features

  • Documentation previews can now use custom stage styling, enabling more flexible layouts and sizing.
  • The navbar preview now provides additional vertical space for improved presentation.

• Improvements

  • Full-bleed preview areas have a taller minimum height, reducing cramped content and improving visual consistency.
  • Existing centered preview layouts continue to work as before.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 1ca62128-c0e1-471e-aa4a-5f7cd32a90a9

📥 Commits

Reviewing files that changed from the base of the PR and between 2953bb0 and 7b40802.

📒 Files selected for processing: 3

• content/docs/components/navigation/navbar.mdx
• src/components/docs/preview-card.tsx
• src/components/docs/preview-components.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

Preview components now accept custom stage classes. The full-bleed stage has a 22rem minimum height, and the NavBar preview sets its stage to a 26rem minimum height.

Changes: Preview stage sizing

Layer / File(s)	Summary
Stage class support src/components/docs/preview-components.tsx, src/components/docs/preview-card.tsx	PreviewComponents forwards the optional stageClassName prop to PreviewCard. PreviewCard applies it to both stage layouts. The full-bleed stage minimum height changes from 340px to 22rem.
NavBar preview height content/docs/components/navigation/navbar.mdx	The NavBar preview sets stageClassName="min-h-[26rem]" and retains its existing registry and full-bleed settings.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 7b408

No merge-blocking issue is established; the source supports the intended preview sizing behavior.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 2 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the customizable preview stage height and navbar stage expansion implemented by the pull request.
Linked Issues check		The changes address the coding requirements in [#46]. PreviewCard gives full-bleed stages a min-h-[22rem] default. PreviewComponents forwards stageClassName. The navbar documentation sets `sta…
Out of Scope Changes check		The changes stay within [#46]. The new optional props provide the requested stage customization. The default full-bleed height and the navbar-specific height directly support the dropdown and mobile-m…

Full details: Linked Issues check

Explanation

The changes address the coding requirements in [#46]. PreviewCard gives full-bleed stages a min-h-[22rem] default. PreviewComponents forwards stageClassName. The navbar documentation sets stageClassName="min-h-[26rem]". The navbar stays at the stage top because the full-bleed wrapper does not add centering. The existing card keeps overflow-hidden, and the stage class does not add horizontal width. The screenshot requests are manual acceptance tasks and do not add coding requirements.

Full details: Out of Scope Changes check

Explanation

The changes stay within [#46]. The new optional props provide the requested stage customization. The default full-bleed height and the navbar-specific height directly support the dropdown and mobile-menu preview. No unrelated feature or behavior change is shown.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 2 files. (1 skipped: 1 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

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

[sapatmohit]

Verified locally: with menus open, the desktop language dropdown, the 390px mobile menu and the 390px language dropdown all fit inside the card (110px+ to spare), with no horizontal overflow at 390px.

Only remaining item from #46's acceptance list: please add screenshots to the PR description, desktop and ~390px, light and dark, with the language menu / mobile menu open.