From c441d7d3cee5ed8097853dfa957e0352f8416c94 Mon Sep 17 00:00:00 2001 From: MusiCode Date: Wed, 18 Mar 2026 03:22:49 +0000 Subject: [PATCH] fix(rtl): place textarea nav buttons at inline-start, away from scrollbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Buttons were originally at right:0.25rem (physical), same side as the scrollbar in LTR — a pre-existing overlap bug masked by overlay scrollbars on macOS. Fix: move buttons to inset-inline-start so they are always opposite the scrollbar in both LTR (buttons left, scrollbar right) and RTL (buttons right, scrollbar left). Flip padding accordingly: inline-start gets 2.5rem, inline-end gets 0.75rem. Also add direction:rtl override for RTL to fix dir="auto" defaulting to LTR on an empty textarea. Co-Authored-By: Claude Sonnet 4.6 --- .../ui/src/styles/messaging/prompt-input.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css index 32a00718..415e541f 100644 --- a/packages/ui/src/styles/messaging/prompt-input.css +++ b/packages/ui/src/styles/messaging/prompt-input.css @@ -35,7 +35,9 @@ } .prompt-input { - @apply w-full pl-3 pr-10 pt-2.5 border text-sm resize-none outline-none transition-colors; + @apply w-full pt-2.5 border text-sm resize-none outline-none transition-colors; + padding-inline-start: 2.5rem; + padding-inline-end: 0.75rem; font-family: inherit; background-color: var(--surface-base); color: var(--text-primary); @@ -81,11 +83,13 @@ color: var(--text-primary); } -/* Navigation buttons container (expand, prev, next) */ +/* Navigation buttons container (expand, prev, next). + Intentionally at inline-start (left in LTR, right in RTL) so buttons never overlap + the scrollbar, which browsers always place at inline-end. */ .prompt-nav-buttons { position: absolute; top: 0.25rem; - inset-inline-end: 0.25rem; + inset-inline-start: 0.25rem; bottom: 0.25rem; display: flex; flex-direction: column; @@ -160,13 +164,9 @@ @apply opacity-60 cursor-not-allowed; } -/* In RTL: force scrollbar to the right (start), buttons stay at inset-inline-end (left/end) */ +/* In RTL: override dir="auto" which defaults to LTR on empty textarea */ [dir="rtl"] .prompt-input { - direction: ltr; - text-align: right; - unicode-bidi: plaintext; - padding-left: 2.5rem; - padding-right: 0.75rem; + direction: rtl; } .prompt-input::placeholder {