Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#27,010 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@juliusmarminge y travaille déjà.

Depuis le 29/10/2026.

  • #27030 par @juliusmarminge — ouverte

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
78/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
react, typescript
Domaine
desktop, frontend

Piste de recherche

Lis apps/web/src/components/settings/IntegrationsSettings.tsx autour de la ligne d’action du hub des appareils, puis consulte apps/web/src/components/ui/button.tsx et apps/web/src/components/device/DeviceToolVersions.tsx pour comprendre les contraintes du bouton et du popover. Reproduis le cas de version longue dans Paramètres > Appareils ; le travail est terminé lorsque l’action de mise à jour reste entièrement dans le popover avec une marge à droite, et que la version requise reste visible.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

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.

Langage dominant
TypeScript
Étoiles
24.8k
Forks
6.4k
Merge moyen
3 h 20 min
PR mergées (30 j)
208

Préparer son environnement

Ouvrir dans Codespaces

Lance le conteneur de développement du projet dans votre navigateur, avec votre propre compte GitHub.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de pingdotgg/t3code

Toutes les issues de pingdotgg/t3code

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.