[UI] Search bar is clipped on mobile viewports on the Kanvas documentation page
维护者通常 1 天内回复
@Yashisinghal285 已经在做这个了。
开始于 2026年10月30日。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 74/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- css, javascript
调研方向
在 414px 的 viewport 下打开 https://docs.layer5.io/kanvas/，检查导航栏标题下方的搜索栏，重点关注其宽度限制、父元素尺寸和响应式 CSS。从页面中找出相关的样式表或组件，并在 Firefox 响应式模式下重现裁切问题。完成标准是：在移动端和桌面端宽度下，搜索栏都能适应 viewport，且没有水平溢出。
由索引模型根据 Issue 内容生成。
描述
Description
The search bar on the Kanvas documentation website appears clipped on mobile viewports. The search input does not fit correctly within the available content area, resulting in a broken responsive layout.
Affected page: https://docs.layer5.io/kanvas/
Steps to Reproduce
- Open https://docs.layer5.io/kanvas/.
- Open browser Developer Tools and enable Responsive Design Mode.
- Set the viewport width to approximately 414px.
- Observe the search bar below the navigation header.
Actual Behavior
The search input appears cut off on the right side instead of fitting within the available viewport width.
Expected Behavior
The search bar should adapt to the available screen width, remain fully visible, and maintain appropriate spacing from the surrounding elements across mobile and desktop viewports.
Environment
- Page: Kanvas Documentation
- Viewport: 414 × 846 pixels
- Browser: Firefox
- Issue type: UI / Responsive Design
Screenshot
The attached screenshot demonstrates the clipped search bar in mobile emulation.
Proposed Outcome
Investigate the search bar's width constraints, parent container sizing, and responsive CSS rules to ensure the search input fits within the available space on smaller screens without horizontal overflow.
I would Like to work on this...
- 主要语言
- JavaScript
- 星标
- 103
- 派生
- 227
- 平均合并
- 15 小时 45 分钟
- 30 天内合并 PR
- 63
环境准备
- 提供 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
layer5io/docs 的其他 Issue
-
Update Help Wanted issue search可能已有人在做 @naveen-cs50-cse 于 2 天前认领。 未关闭area/docs framework/hugo help wanted language/markdown
难度 1/5 1 小时以内 新手友好度 88/100
维护者通常 1 天内回复
-
area/ci area/performance kind/enhancement
难度 2/5 1-3 小时 新手友好度 72/100
维护者通常 1 天内回复
-
White-labeling guide: custom-dashboard-2.png still shows the removed left-drawer widget picker可能重新可做 @kavleencodes 于 42 天前认领，目前没有进行中的 PR。 未关闭
难度 2/5 1-3 小时 新手友好度 82/100
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 92/100
维护者通常 1 天内回复
-
[Debt] `archive` folder is dead code可能重新可做 @PARTH-TUSSLE 于 144 天前认领，目前没有进行中的 PR。 未关闭framework/hugo help wanted kind/bug language/css language/javascript
难度 1/5 1 小时以内 新手友好度 65/100
维护者通常 1 天内回复
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 70/100
solana-foundation/solana-web3.js#4015 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 82/100
gramps-project/gramps-web#1604 ·
维护者通常 1 天内回复
-
enhancement good first issue hacktoberfest help wanted
难度 2/5 1-3 小时 新手友好度 85/100
BinaryBaconLabs/todo-app#18 ·
-
enhancement
难度 2/5 1-3 小时 新手友好度 66/100
sutantyo/flight-watch#32 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 88/100
维护者通常 1 天内回复