Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#46 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
78/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
next.js, react, tailwindcss, typescript
Bereich
design, frontend

Rechercherichtung

Beginne mit src/components/docs/preview-shell.tsx und der NavBar-Dokumentationsseite, die PreviewComponents mit registryName="navbar" und fullBleed verwendet; prüfe, wie die Größe der Stage und das Überlaufen der Karte zusammenspielen. Vergleiche das Desktop-Dropdown und das mobile Menü bei etwa 390px und untersuche anschließend andere fullBleed-Previews auf Regressionen. Fertig ist es, wenn beide Menüs in die Karte passen und bei 390px kein horizontaler Überlauf auftritt; erstelle Screenshots für Desktop und Mobilgeräte im hellen und dunklen Modus.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug website

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:

  • On main, the card clips with overflow-hidden, so the open dropdown is cut off at the card edge.
  • With the clipping removed (as #44 does), the dropdown spills out of the card over the Installation section below.

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.
Vorherrschende Sprache
TypeScript
Sterne
39
Forks
16
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
10

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus babelize/babelize-elements

Alle Issues in babelize/babelize-elements

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.