salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(rtl): place textarea nav buttons at inline-start, away from scrollbar

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
MusiCode
2026-03-18 03:22:49 +00:00
committed by Shantur Rathore
parent be8fcc98c5
commit c441d7d3ce
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/ui/src/styles/messaging/prompt-input.css
View File

@@ -35,7 +35,9 @@
} }
.prompt-input { .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; font-family: inherit;
background-color: var(--surface-base); background-color: var(--surface-base);
color: var(--text-primary); color: var(--text-primary);
@@ -81,11 +83,13 @@
color: var(--text-primary); 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 { .prompt-nav-buttons {
position: absolute; position: absolute;
top: 0.25rem; top: 0.25rem;
inset-inline-end: 0.25rem; inset-inline-start: 0.25rem;
bottom: 0.25rem; bottom: 0.25rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -160,13 +164,9 @@
@apply opacity-60 cursor-not-allowed; @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 { [dir="rtl"] .prompt-input {
direction: ltr; direction: rtl;
text-align: right;
unicode-bidi: plaintext;
padding-left: 2.5rem;
padding-right: 0.75rem;
} }
.prompt-input::placeholder { .prompt-input::placeholder {