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

[UI] Search bar is clipped on mobile viewports on the Kanvas documentation page

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#1,366 2 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

@Yashisinghal285 đang làm issue này rồi.

Từ ngày 30/10/2026.

Đá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
74/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ệ
css, javascript
Lĩnh vực
documentation, frontend

Hướng nghiên cứu

Mở https://docs.layer5.io/kanvas/ ở viewport 414px và kiểm tra thanh tìm kiếm bên dưới header điều hướng. Tập trung vào các giới hạn chiều rộng, kích thước của phần tử cha và CSS responsive. Xác định stylesheet hoặc component liên quan từ trang và tái hiện hiện tượng bị cắt trong chế độ responsive của Firefox. Hoàn tất khi thanh tìm kiếm nằm gọn trong viewport, không bị tràn ngang ở cả chiều rộng trên thiết bị di động lẫn máy tính để bàn.

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

Mô tả

framework/hugo help wanted kind/bug language/css language/javascript

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
  1. Open https://docs.layer5.io/kanvas/.
  2. Open browser Developer Tools and enable Responsive Design Mode.
  3. Set the viewport width to approximately 414px.
  4. 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...
Image
Ngôn ngữ chính
JavaScript
Star
103
Fork
227
Merge trung bình
15 giờ 45 phút
Pull request đã merge (30 ngày)
63

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 layer5io/docs

Tất cả issue của layer5io/docs

Issue tương tự

Thêm issue về JavaScript

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.