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

[Bug]: Device hub update button is clipped with long canary version strings

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

Chưa có ai nhận issue này.

Đá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
78/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ệ
react, typescript
Lĩnh vực
desktop, frontend

Hướng nghiên cứu

Đọc apps/web/src/components/settings/IntegrationsSettings.tsx ở khu vực hàng thao tác của trung tâm thiết bị, sau đó kiểm tra apps/web/src/components/ui/button.tsx và apps/web/src/components/device/DeviceToolVersions.tsx để hiểu các giới hạn của nút và popover. Tái hiện trường hợp phiên bản dài trong Cài đặt > Thiết bị; hoàn tất khi thao tác cập nhật nằm trọn trong popover với khoảng đệm bên phải và phiên bản bắt buộc vẫn hiển thị.

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

Mô tả

Before submitting
  • I searched existing issues and did not find a duplicate.
  • I included enough detail to reproduce or investigate the problem.
Area

apps/web

Steps to reproduce
  1. Open Settings > Devices with device support enabled.
  2. Use a device hub requirement with a long prerelease version, such as 0.19.0-canary-20261023-1357114, and a host where that version is not installed.
  3. Click the hub version/status text (Not installed in this case) to open the Device hub popover.
  4. Look at the Update to v0.19.0-canary-20261023-1357114 button above Check versions.

Observed state in the reporter's screenshot:

  • Running: Not running
  • Required: 0.19.0-canary-20261023-1357114
  • Installed: None
  • Settings scope: All projects / All environments
Expected behavior

The update button and its label should fit within the popover and preserve its right padding. Long prerelease versions should wrap, or the action should use a shorter label while keeping the full version available in the Required row.

Actual behavior

The blue update button runs into the popover's right edge, and the end of its label/right side is clipped. The Check versions button wraps onto the next line and fits normally. The surrounding settings page has available space, so this looks like a constraint inside the popover rather than the page reaching the window edge.

This report concerns the visible layout defect. The screenshot alone does not establish an installation failure or a stuck update.

Image
Impact

Cosmetic issue

The action label and button boundary are incomplete, making the version details UI look broken.

Version or commit
  • Installed Windows app: T3 Code (Beta); executable file version 0.1.5 (full prerelease identifier not confirmed).
  • Device hub required version shown in the screenshot: 0.19.0-canary-20261023-1357114.
  • Source inspected separately: main at 37fbefd147197fab9d88f9c120560c3f21b52cfc. This is not a claim that the installed app is built from that commit.
Environment

Windows desktop app, dark appearance. Window dimensions, display scaling, and UI zoom were not recorded.

Logs or stack traces

No runtime logs collected; this is a screenshot-based UI report with supporting source inspection.

Supporting source inspection

The following combination appears consistent with the clipping, but has not been validated with a local runtime reproduction:

  • DeviceToolVersions.tsx uses <PopoverPopup align="end" width="md">.
  • popover.tsx maps md to w-80, adds inline padding, and constrains overflow in the viewport.
  • IntegrationsSettings.tsx renders the entire required version in a small Button inside a flex flex-wrap action row.
  • button.tsx gives buttons shrink-0 and whitespace-nowrap by default. Wrapping the action row moves whole buttons, but cannot make one oversized label fit.

A short Update label would avoid repeating the already-visible Required version. Alternatively, allow this action to wrap within the available width while preserving padding.

Workaround

No verified workaround.

Ngôn ngữ chính
TypeScript
Star
24.8k
Fork
6.4k
Merge trung bình
3 giờ 21 phút
Pull request đã merge (30 ngày)
297

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

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 pingdotgg/t3code

Tất cả issue của pingdotgg/t3code

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.