Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
#27,010 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
desktop, frontend

調査の方向性

デバイスハブのアクション行付近にある apps/web/src/components/settings/IntegrationsSettings.tsx を読み、次に apps/web/src/components/ui/button.tsx と apps/web/src/components/device/DeviceToolVersions.tsx を確認して、ボタンとポップオーバーの制約を把握してください。設定 > デバイスで長いバージョンのケースを再現してください。更新アクションが右側の余白を保ってポップオーバー内に完全に収まり、必要なバージョンが表示されたままであれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
24.8k
フォーク
6.4k
平均マージ
3時間 21分
マージ済み PR(30日)
297

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

pingdotgg/t3code のほかの issue

pingdotgg/t3code の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。