Skip to content

Docs: NavBar preview is too short for its dropdown and mobile menu #46

Closed

Description

@sapatmohit

Problem

The NavBar docs preview (<PreviewComponents registryName="navbar" fullBleed>) is only as tall as the bar itself. fullBleed renders the demo with no padding or minimum height (src/components/docs/preview-shell.tsx), so the language dropdown and the mobile menu have no room inside the card:

Either way, the preview doesn't show the component's main interaction.

Expected

The NavBar preview stage reserves enough space for its popups: the open language menu with all demo locales, and the mobile menu at narrow widths. Both should fit inside the card.

Suggested fix

  • Give the fullBleed stage a minimum height, or let PreviewComponents accept a minHeight / className for the stage, and set it on the NavBar page (roughly min-h-[22rem]).
  • Leave the bar at the top of the stage; the empty area below is where the menus open.
  • Check the other fullBleed previews aren't affected.

Acceptance

  • Open language dropdown fits fully inside the preview card on desktop.
  • Mobile menu (~390px) fits inside the card.
  • No horizontal page overflow at 390px.
  • Screenshots: desktop and ~390px, light and dark.

Activity

  1. added
    bugSomething isn't working
    websiteLanding page, docs site, or content
    on Oct 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingwebsiteLanding page, docs site, or content

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions