Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#46 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
next.js, react, tailwindcss, typescript
Lĩnh vực
design, frontend

Hướng nghiên cứu

Bắt đầu với src/components/docs/preview-shell.tsx và trang tài liệu NavBar sử dụng PreviewComponents cùng với registryName="navbar" và fullBleed; kiểm tra cách kích thước vùng hiển thị và phần tràn của thẻ tương tác với nhau. So sánh menu thả xuống trên desktop với menu trên thiết bị di động ở khoảng 390px, sau đó kiểm tra các bản xem trước fullBleed khác để tìm lỗi hồi quy. Hoàn tất khi cả hai menu đều nằm gọn trong thẻ và không có phần tràn ngang ở 390px; chụp ảnh màn hình desktop và thiết bị di động ở chế độ sáng và tối.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
39
Fork
16
Merge trung bình
2 ngày 12 giờ
Pull request đã merge (30 ngày)
10

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của babelize/babelize-elements

Tất cả issue của babelize/babelize-elements

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.