Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#27,010 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@juliusmarminge is already working on this.

Since Oct 29, 2026.

  • #27030 by @juliusmarminge — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
desktop, frontend

Research direction

Read apps/web/src/components/settings/IntegrationsSettings.tsx around the device hub action row, then check apps/web/src/components/ui/button.tsx and apps/web/src/components/device/DeviceToolVersions.tsx to understand the button and popover constraints. Reproduce the long-version case in Settings > Devices; done means the update action stays fully inside the popover with right padding while the required version remains visible.

Written by the indexing model from the issue text.

Description

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.

Dominant language
TypeScript
Stars
24.8k
Forks
6.4k
Avg merge
3h 20m
Merged PRs (30d)
208

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from pingdotgg/t3code

All issues in pingdotgg/t3code

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.