From df6c96453fda097db3236a4adcc0da22545dd663 Mon Sep 17 00:00:00 2001
From: MusiCode <musicode3@gmail.com>
Date: Wed, 18 Mar 2026 16:01:42 +0000
Subject: [PATCH] fix(rtl): fix code block direction, selector alignment, and
 narrow-screen padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add direction: ltr to pre elements so code always displays LTR in RTL UI
- Fix selector secondary text: text-left → text-start, add w-full to
  prevent RTL flex cross-axis drift
- Add dir="ltr" to model path span (opencode/model-id is always LTR)
- Restore padding-inline-start: 2.5rem in narrow-screen media query
  where padding shorthand was overriding it

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/ui/src/components/model-selector.tsx     | 2 +-
 packages/ui/src/styles/components/selector.css    | 4 ++--
 packages/ui/src/styles/markdown.css               | 1 +
 packages/ui/src/styles/messaging/message-base.css | 1 +
 packages/ui/src/styles/messaging/prompt-input.css | 1 +
 packages/ui/src/styles/messaging/tool-call.css    | 2 ++
 6 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/model-selector.tsx b/packages/ui/src/components/model-selector.tsx
index 005af3ad..6f5c5955 100644
--- a/packages/ui/src/components/model-selector.tsx
+++ b/packages/ui/src/components/model-selector.tsx
@@ -295,7 +295,7 @@ export default function ModelSelector(props: ModelSelectorProps) {
                 {t("modelSelector.trigger.primary", { model: currentModelValue()?.name ?? t("modelSelector.none") })}
               </span>
           {currentModelValue() && (
-                <span class="selector-trigger-secondary">
+                <span class="selector-trigger-secondary" dir="ltr">
                   {currentModelValue()!.providerId}/{currentModelValue()!.id}
                 </span>
               )}
diff --git a/packages/ui/src/styles/components/selector.css b/packages/ui/src/styles/components/selector.css
index bcecda00..414d1213 100644
--- a/packages/ui/src/styles/components/selector.css
+++ b/packages/ui/src/styles/components/selector.css
@@ -40,11 +40,11 @@
 }
 
 .selector-trigger-primary--align-left {
-  @apply text-left w-full;
+  @apply text-start w-full;
 }
 
 .selector-trigger-secondary {
-  @apply text-xs text-left truncate;
+  @apply text-xs text-start truncate w-full;
   color: var(--text-muted);
 }
 
diff --git a/packages/ui/src/styles/markdown.css b/packages/ui/src/styles/markdown.css
index 8cd10e07..bbb4d70f 100644
--- a/packages/ui/src/styles/markdown.css
+++ b/packages/ui/src/styles/markdown.css
@@ -136,6 +136,7 @@
     border-radius: 8px;
     padding: 0.75rem;
     margin: 1rem 0;
+    direction: ltr;
   }
 
   .markdown-body pre:not(.shiki) code,
diff --git a/packages/ui/src/styles/messaging/message-base.css b/packages/ui/src/styles/messaging/message-base.css
index 3a64777c..852bb41d 100644
--- a/packages/ui/src/styles/messaging/message-base.css
+++ b/packages/ui/src/styles/messaging/message-base.css
@@ -258,6 +258,7 @@
   padding: 8px;
   background-color: var(--surface-code);
   border-radius: 4px;
+  direction: ltr;
 }
 
 .message-error-part {
diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css
index 415e541f..a0cd3ff9 100644
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -344,6 +344,7 @@
   .prompt-input {
     min-height: 0;
     padding: 0.5rem 0.75rem;
+    padding-inline-start: 2.5rem; /* preserve space for nav buttons */
     padding-bottom: 0.75rem;
   }
 
diff --git a/packages/ui/src/styles/messaging/tool-call.css b/packages/ui/src/styles/messaging/tool-call.css
index 53314041..55aa2448 100644
--- a/packages/ui/src/styles/messaging/tool-call.css
+++ b/packages/ui/src/styles/messaging/tool-call.css
@@ -549,6 +549,7 @@
   min-height: auto;
   max-height: none;
   overflow-y: visible;
+  direction: ltr;
 }
 
 /* Shiki injects inline background colors; force token surfaces. */
@@ -762,6 +763,7 @@
   overflow-x: auto;
   max-height: var(--tool-call-max-height-compact, calc(25 * 1.4em));
   overflow-y: scroll;
+  direction: ltr;
 }
 
 .tool-call-section code {