[UI] Search bar is clipped on mobile viewports on the Kanvas documentation page
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 74/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- css, javascript
- Domain
- documentation, frontend
Research direction
Open https://docs.layer5.io/kanvas/ at a 414px viewport and inspect the search bar below the navigation header, focusing on its width constraints, parent sizing, and responsive CSS. Identify the relevant stylesheet or component from the page and reproduce the clipping in Firefox responsive mode. Done means the search bar fits within the viewport without horizontal overflow at mobile and desktop widths.
Written by the indexing model from the issue text.
Description
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...
- Dominant language
- JavaScript
- Stars
- 103
- Forks
- 227
- Avg merge
- 15h 45m
- Merged PRs (30d)
- 63
Getting set up
- Ships a Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from layer5io/docs
-
Update Help Wanted issue searchPossibly taken @naveen-cs50-cse claimed this 1 day ago. Openarea/docs framework/hugo help wanted language/markdown
Difficulty 1/5 Under an hour Newbie friendliness 88/100
layer5io/docs#1361 · 2 comments ·
Maintainers usually reply within 1 day
-
area/ci area/performance kind/enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
White-labeling guide: custom-dashboard-2.png still shows the removed left-drawer widget pickerMay be free again @kavleencodes claimed this 41 days ago, and no pull request is open. Open
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
layer5io/docs#1242 · 1 comment ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 92/100
layer5io/docs#1186 · 1 comment ·
Maintainers usually reply within 1 day
-
[Debt] `archive` folder is dead codeMay be free again @PARTH-TUSSLE claimed this 144 days ago, and no pull request is open. Openframework/hugo help wanted kind/bug language/css language/javascript
Difficulty 1/5 Under an hour Newbie friendliness 65/100
layer5io/docs#1014 · 4 comments ·
Maintainers usually reply within 1 day
Similar issues
-
[guide] AGENTS.md claims the coverage gate, e2e and full lint run on every PR after ADR 0011 focused validationPossibly taken @hivecommons-hive claimed this today. Openagent/guide documentation hive/claimed-by-guide stage/040-covered-by-pr
Difficulty 2/5 1-3 hours Newbie friendliness 81/100
cncf/endusers#2006 · 1 comment ·
Maintainers usually reply within 1 day
-
check:passed feeds:add
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
Maintainers usually reply within 4 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
all-contributors/cli#587 ·
Maintainers usually reply within 1 day
-
RGAA5
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
Maintainers usually reply within 8 days
-
feedback simulation workshop
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
githubnext/gh-aw-workshop#5157 ·
Maintainers usually reply within 1 day