From 1258e471c18a7b82c2f24af1a924a22dd8396d8e Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Wed, 6 May 2026 20:49:42 -0700 Subject: [PATCH] fix(dashboard): contain iOS rubber-band on ChatView messages and composer Three scoped overscroll fixes for the ChatView mobile keyboard-up case: - .chat-messages: overscroll-behavior: contain so edge-swipes on the messages list don't bounce the parent / document. - .chat-input-area: overscroll-behavior: contain so swipes on the composer footer don't escape upward. - .chat-input-textarea: touch-action: pan-y + overscroll-behavior: contain so a vertical swipe started on the textarea stays inside the textarea (multi-line scroll still works) instead of rubber-banding the page and exposing the body background. User-reported symptom: keyboard up + swipe up on the textarea edge, the composer shakes and a gray box (body background) partially covers it. Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/dashboard/app/components/ChatView.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/dashboard/app/components/ChatView.css b/packages/dashboard/app/components/ChatView.css index 298f0a643..11f4b8d1b 100644 --- a/packages/dashboard/app/components/ChatView.css +++ b/packages/dashboard/app/components/ChatView.css @@ -282,6 +282,13 @@ display: flex; flex-direction: column; gap: 12px; + /* Stop iOS rubber-band scroll from propagating to the parent / + document when the user swipes on the edge of the messages list + with the keyboard up. Without this, the bounce escapes the + scroll container, the page itself shifts, and the chat-thread + transform momentarily exposes the body background as a gray + box partially covering the messages. */ + overscroll-behavior: contain; } .chat-message { @@ -753,6 +760,10 @@ display: flex; flex-direction: column; gap: var(--space-sm); + /* Stop iOS rubber-band escape when the user swipes on the composer + edge with the keyboard up. Without it the page momentarily shifts + and the body background peeks through above the messages. */ + overscroll-behavior: contain; } .chat-input-row { @@ -837,6 +848,12 @@ line-height: 1.4; max-height: 120px; min-height: 40px; + /* iOS: a vertical swipe started on the textarea otherwise rubber-bands + the document, momentarily exposing the body background. pan-y keeps + internal multi-line scroll usable while preventing the gesture from + escaping to the page. */ + touch-action: pan-y; + overscroll-behavior: contain; } .chat-input-textarea:focus {