Docs: NavBar preview is too short for its dropdown and mobile menu
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 78/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- next.js, react, tailwindcss, typescript
调研方向
从 src/components/docs/preview-shell.tsx 和使用 PreviewComponents、registryName="navbar" 及 fullBleed 的 NavBar 文档页面开始；检查舞台尺寸与卡片溢出之间的相互影响。在约 390px 宽度下比较桌面端下拉菜单和移动端菜单，然后检查其他 fullBleed 预览是否出现回归问题。完成标准是两个菜单都能容纳在卡片内，且在 390px 宽度下没有水平溢出；请分别在浅色和深色模式下截取桌面端和移动端的屏幕截图。
由索引模型根据 Issue 内容生成。
描述
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 withoverflow-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
fullBleedstage a minimum height, or letPreviewComponentsaccept aminHeight/classNamefor the stage, and set it on the NavBar page (roughlymin-h-[22rem]). - Leave the bar at the top of the stage; the empty area below is where the menus open.
- Check the other
fullBleedpreviews 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.
- 主要语言
- TypeScript
- 星标
- 39
- 派生
- 16
- 平均合并
- 2 天 12 小时
- 30 天内合并 PR
- 10
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
babelize/babelize-elements 的其他 Issue
-
bug language-switcher priority: medium
难度 2/5 1-3 小时 新手友好度 72/100
babelize/babelize-elements#26 ·
维护者通常 1 天内回复
-
component enhancement help wanted
难度 5/5 一周以上 新手友好度 35/100
babelize/babelize-elements#47 ·
维护者通常 1 天内回复
-
bug component rtl-layout
难度 3/5 1-2 天 新手友好度 68/100
babelize/babelize-elements#45 ·
维护者通常 1 天内回复
-
Website: revamp and improve the landing page可能已有人在做 @anjalinayak01 于 4 天前认领。 未关闭enhancement help wanted priority: medium website
难度 4/5 一周以上 新手友好度 30/100
babelize/babelize-elements#37 · 已指派 1 人 ·
维护者通常 1 天内回复
-
enhancement good first issue priority: low website
难度 3/5 1-2 天 新手友好度 62/100
babelize/babelize-elements#36 ·
维护者通常 1 天内回复
查看 babelize/babelize-elements 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 72/100
stellar/stellar-dev-skill#151 ·
维护者通常 1 天内回复
-
area:arcade game ready-for-agent
难度 2/5 1-3 小时 新手友好度 62/100
fderuiter/deruiter.dev#2281 · 1 条评论 ·
维护者通常 1 天内回复
-
scope: data grid type: bug
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 2 天内回复
-
fix(frontend): correct VITE_IS_DEVELPOMENT typo in shared/app.ts and align dev environment flags未关闭
难度 2/5 1-3 小时 新手友好度 75/100
vicharanashala/ajrasakha#1439 ·
维护者通常 1 天内回复
-
approved check:passed streams:add
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 1 天内回复