Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#46 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
next.js, react, tailwindcss, typescript
Ambito
design, frontend

Direzione di ricerca

Inizia da src/components/docs/preview-shell.tsx e dalla pagina di documentazione NavBar che usa PreviewComponents con registryName="navbar" e fullBleed; verifica come interagiscono le dimensioni dell’area di visualizzazione e l’overflow della scheda. Confronta il menu a discesa desktop e il menu mobile a circa 390px, poi controlla altre anteprime fullBleed per individuare regressioni. Il lavoro è terminato quando entrambi i menu rientrano nella scheda e non c’è overflow orizzontale a 390px; acquisisci screenshot desktop e mobile in modalità chiara e scura.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
TypeScript
Stelle
39
Fork
16
Merge medio
2g 12h
PR unite (30g)
10

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di babelize/babelize-elements

Tutte le issue di babelize/babelize-elements

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.