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

fix(UI): shortcut popover overflows

Đã đóng Phù hợp với người mới
  • Có gì không ổn?
#333 2 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

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

Từ ngày 24/10/2026.

  • #343 của @Vis-halV — đã đóng, không merge
  • #344 của @DeepakNegi13 — đã merge

Đá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
68/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ệ
nextjs, tailwindcss, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Tìm giao diện của công cụ Base64 và popover phím tắt được mở bằng nút ⌨ Shortcuts. Kiểm tra cách popover được định vị so với nút và so sánh vị trí của nó với viewport ở chiều rộng dành cho desktop. Công việc được coi là hoàn tất khi popover và tất cả nhãn phím tắt vẫn hiển thị trong viewport; issue cung cấp các bước tái hiện nhưng không nêu tên tệp kiểm thử nào.

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

Mô tả

bug good first issue hacktoberfest
Which tool?

Base64

What happened?
Description

On desktop/laptop viewports, clicking the ⌨ Shortcuts button opens a popover card that is misaligned and overflows off the left edge of the screen. As a result, the action labels adjacent to the keyboard shortcuts (e.g., next to Ctrl Enter, Ctrl Shift S) are cut off and unreadable.

Steps to Reproduce
  1. Navigate to Base64 tool view
  2. Click the ⌨ Shortcuts button.
  3. Observe the left-hand position of the popover card.
Expected Behavior

The shortcut menu should be positioned relative to the button (e.g., aligned with the button's start) or constrained with proper viewport padding so all shortcut keys and text labels remain fully visible.

Actual Behavior

The popover renders too far to the left, clipping outside the visible viewport.

Screenshot
Image
  • the left part of the shortcut popover is not visible in the image
Environment
  • OS: Windows
  • Device: Laptop
  • Browser: Chrome / Brave/Edge
  • Resolution: 1080p (Default zoom)

I have reproduced this issue locally and would like to work on this issue . Could you please assign this to me?. So that i start contributing to codercops

Browser and OS

Chrome , Edge , Brave on Windows

Checks
  • I searched existing issues and this is not a duplicate.
  • This does not include a real secret or token in the reproduction.
Ngôn ngữ chính
TypeScript
Star
1
Fork
9
Merge trung bình
8 giờ 8 phút
Pull request đã merge (30 ngày)
155

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 codercops/toolbelt

Tất cả issue của codercops/toolbelt

Issue tương tự

Thêm issue về TypeScript

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.