[Bug]: Slash menu drifts away from the composer when dragging on iPad

Offen Anfängerfreundlich
#30,685 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
79/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
typescript
Bereich
frontend

Rechercherichtung

Beginne mit apps/web/src/components/chat/ComposerCommandMenuLayer.tsx und untersuche, wie der Layer seine Position anhand von getBoundingClientRect() des Composers aktualisiert. Reproduziere das Problem auf einem iPad bei geöffneter Tastatur und prüfe dann, wie sich Resize- und Scroll-Ereignisse von visualViewport auf den Composer und das Menü auswirken. Fertig ist es, wenn das Slash-Menü beim Ziehen der Seite am Composer befestigt bleibt und das Verhalten auf dem iPad überprüft wurde.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

needs more info
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 the T3 Code web client in a browser tab on an iPad.
  2. Tap the composer so the keyboard opens, then type / to open the slash menu.
  3. Drag up or down on the page outside the composer.
Expected behavior

The slash menu stays attached to the top of the composer.

Actual behavior

The page moves but the slash menu does not move with the composer. It drifts away from the composer while dragging.

The menu is portaled to body as position: fixed. Its position comes from the composer's getBoundingClientRect() (apps/web/src/components/chat/ComposerCommandMenuLayer.tsx) and only updates on window resize/scroll. With the keyboard open, iPadOS pans the visual viewport, and that panning fires on visualViewport, which the layer does not listen to. The composer moves with the page while the menu keeps its old coordinates.

Pinning the shell to the visual viewport, as #19513 does on phones, would remove most of the panning. The layer still needs to update on visualViewport resize and scroll.

Impact

Minor bug or occasional failure

Version or commit

main at bb4afa542

Environment

iPad, web client in a browser tab. iPadOS and browser versions were not recorded.

Logs or stack traces

None.

Workaround

None found.

[!Note]
Responses generated with Claude (model: Claude Opus 5.5)

Vorherrschende Sprache
TypeScript
Sterne
24.8k
Forks
6.4k
Ø Merge
7 Std. 33 Min.
Gemergte PRs (30 T.)
96

Entwicklungsumgebung

In Codespaces öffnen

Startet den Dev-Container des Projekts im Browser, mit Ihrem eigenen GitHub-Konto.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus pingdotgg/t3code

Alle Issues in pingdotgg/t3code

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.