[UI] Search bar is clipped on mobile viewports on the Kanvas documentation page
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 74/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- css, javascript
調査の方向性
https://docs.layer5.io/kanvas/ を414pxのビューポートで開き、ナビゲーションヘッダーの下にある検索バーを調べてください。幅の制約、親要素のサイズ設定、レスポンシブCSSに注目してください。ページから該当するスタイルシートまたはコンポーネントを特定し、Firefoxのレスポンシブモードで表示の切れを再現してください。モバイルとデスクトップの幅で、検索バーが水平方向にはみ出さずビューポート内に収まれば完了です。
索引モデルが 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分
- マージ済み PR（30日）
- 63
環境構築
- Dockerfile または Docker Compose ファイルあり
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
layer5io/docs のほかの issue
-
Update Help Wanted issue search対応中かも @naveen-cs50-cse が 1 日前に担当しました。 オープンarea/docs framework/hugo help wanted language/markdown
難易度 1/5 1時間未満 初心者へのやさしさ 88/100
layer5io/docs#1361 · コメント 2 件 ·
メンテナーはふだん 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 日前に担当しましたが、オープン中のプルリクエストはありません。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
layer5io/docs#1242 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 92/100
layer5io/docs#1186 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
[Debt] `archive` folder is dead code再び着手できるかも @PARTH-TUSSLE が 144 日前に担当しましたが、オープン中のプルリクエストはありません。 オープンframework/hugo help wanted kind/bug language/css language/javascript
難易度 1/5 1時間未満 初心者へのやさしさ 65/100
layer5io/docs#1014 · コメント 4 件 ·
メンテナーはふだん 1 日以内に返信
似ている issue
-
ai-driven-fuzzing bug claude Minor
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
linagora/cozy-client#1777 · コメント 1 件 · リアクション 1 件 ·
メンテナーはふだん 1 日以内に返信
-
[guide] AGENTS.md claims the coverage gate, e2e and full lint run on every PR after ADR 0011 focused validation対応中かも @hivecommons-hive が今日担当しました。 オープンagent/guide documentation hive/claimed-by-guide stage/040-covered-by-pr
難易度 2/5 1〜3時間 初心者へのやさしさ 81/100
cncf/endusers#2006 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
check:passed feeds:add
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
メンテナーはふだん 4 日以内に返信
-
CMS video element: "CmsVideoPlugin" sets `volume = 0`, so videos cannot be unmuted on Android Chromeオープンneeds-triage Platform(Default)
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
all-contributors/cli#587 ·
メンテナーはふだん 1 日以内に返信