fix: RTL text layout support in web UI (issue #16875)

packages/console/app/src/lib/language.ts

@@ -216,11 +216,17 @@ export function tag(locale: Locale) {
   return TAG[locale]
 }
 
+const RTL_LOCALES: ReadonlySet<string> = new Set(["ar", "he", "fa", "ur"])
+
 export function dir(locale: Locale) {
-  if (locale === "ar") return "rtl"
+  if (RTL_LOCALES.has(locale)) return "rtl"
   return "ltr"
 }
 
+export function isRtl(locale: Locale) {
+  return RTL_LOCALES.has(locale)
+}
+
 function match(input: string): Locale | null {
   const value = input.trim().toLowerCase()
   if (!value) return null

packages/ui/src/components/card.css

@@ -39,7 +39,7 @@
   &::before {
     content: "";
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     top: var(--card-line-pad);
     bottom: var(--card-line-pad);
     width: 2px;
@@ -89,6 +89,6 @@
   }
 
   :where([data-card="actions"], [data-slot="card-actions"]) {
-    padding-left: var(--card-indent);
+    padding-inline-start: var(--card-indent);
   }
 }

packages/ui/src/components/dialog.css

@@ -77,7 +77,7 @@
       [data-slot="dialog-description"] {
         display: flex;
         padding: 16px;
-        padding-left: 24px;
+        padding-inline-start: 24px;
         padding-top: 0;
         margin-top: -8px;
         justify-content: space-between;

packages/ui/src/components/file.css

@@ -30,10 +30,10 @@
     color: var(--text-base);
     width: var(--diffs-column-content-width);
     left: var(--diffs-column-number-width);
-    padding-left: 8px;
+    padding-inline-start: 8px;
     user-select: none;
     cursor: default;
-    text-align: left;
+    text-align: start;
 
     [data-slot="diff-hunk-separator-content-span"] {
       mix-blend-mode: var(--text-mix-blend-mode);

packages/ui/src/components/markdown.css

@@ -60,8 +60,8 @@
   ol {
     margin-top: 0.5rem;
     margin-bottom: 1rem;
-    margin-left: 0;
-    padding-left: 1.5rem;
+    margin-inline-start: 0;
+    padding-inline-start: 1.5rem;
     list-style-position: outside;
   }
 
@@ -71,7 +71,7 @@
 
   ol {
     list-style-type: decimal;
-    padding-left: 2.25rem;
+    padding-inline-start: 2.25rem;
   }
 
   li {
@@ -97,18 +97,18 @@
   li > ol {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
-    padding-left: 1rem; /* Minimal indent for nesting only */
+    padding-inline-start: 1rem; /* Minimal indent for nesting only */
   }
 
   li > ol {
-    padding-left: 1.75rem;
+    padding-inline-start: 1.75rem;
   }
 
   /* Blockquotes */
   blockquote {
-    border-left: 2px solid var(--border-weak-base);
+    border-inline-start: 2px solid var(--border-weak-base);
     margin: 1.5rem 0;
-    padding-left: 0.5rem;
+    padding-inline-start: 0.5rem;
     color: var(--text-weak);
     font-style: normal;
   }
@@ -240,7 +240,7 @@
     /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
     border-bottom: 1px solid var(--border-weaker-base);
     padding: 0.75rem 0.5rem;
-    text-align: left;
+    text-align: start;
     vertical-align: top;
   }
 

packages/ui/src/components/message-nav.css

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding-left: 0;
+  padding-inline-start: 0;
   list-style: none;
 
   &[data-size="normal"] {
@@ -77,7 +77,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
-  text-align: left;
+  text-align: start;
 
   &[data-active] {
     color: var(--text-strong);

packages/ui/src/components/message-part.css

@@ -30,7 +30,7 @@
     gap: 8px;
     width: fit-content;
     max-width: min(82%, 64ch);
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 
   [data-slot="user-message-attachment"] {
@@ -115,7 +115,7 @@
   [data-slot="user-message-body"] {
     width: fit-content;
     max-width: min(82%, 64ch);
-    margin-left: auto;
+    margin-inline-start: auto;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
@@ -167,7 +167,7 @@
 
   [data-slot="user-message-meta"] {
     user-select: none;
-    text-align: right;
+    text-align: end;
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -189,7 +189,7 @@
     user-select: none;
     flex: 0 0 auto;
     white-space: nowrap;
-    text-align: right;
+    text-align: end;
   }
 
   &:hover [data-slot="user-message-copy-wrapper"],
@@ -488,8 +488,8 @@
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    direction: rtl;
-    text-align: left;
+    direction: rtl; /* truncate-start: shows end of file path */
+    text-align: left; /* override RTL alignment for short paths */
   }
 
   [data-slot="message-part-filename"] {
@@ -637,9 +637,9 @@
 
 [data-component="context-tool-group-list"] {
   padding-top: 6px;
-  padding-right: 0;
+  padding-inline-end: 0;
   padding-bottom: 4px;
-  padding-left: 13px;
+  padding-inline-start: 13px;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -815,8 +815,7 @@
     gap: 8px;
 
     [data-component="button"] {
-      padding-left: 12px;
-      padding-right: 12px;
+      padding-inline: 12px;
     }
   }
 }
@@ -950,7 +949,7 @@
     border: 1px solid var(--border-weak-base);
     border-radius: 6px;
     box-shadow: none;
-    text-align: left;
+    text-align: start;
     width: 100%;
     cursor: pointer;
     transition:
@@ -1066,7 +1065,7 @@
   }
 
   [data-slot="question-custom-input-wrap"] {
-    padding-left: 36px;
+    padding-inline-start: 36px;
   }
 
   [data-slot="question-custom-input"] {
@@ -1196,8 +1195,8 @@
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    direction: rtl;
-    text-align: left;
+    direction: rtl; /* truncate-start: shows end of file path */
+    text-align: left; /* override RTL alignment for short paths */
   }
 
   [data-slot="apply-patch-filename"] {

packages/ui/src/components/session-review.css

@@ -119,8 +119,8 @@
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    direction: rtl;
-    text-align: left;
+    direction: rtl; /* truncate-start: shows end of file path */
+    text-align: left; /* override RTL alignment for short paths */
   }
 
   [data-slot="session-review-filename"] {

packages/ui/src/components/session-turn.css

@@ -179,8 +179,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    direction: rtl;
-    text-align: left;
+    direction: rtl; /* truncate-start: shows end of file path */
+    text-align: left; /* override RTL alignment for short paths */
   }
 
   [data-slot="session-turn-diff-filename"] {

packages/ui/src/components/tool-error-card.css

@@ -16,14 +16,14 @@
 
   [data-slot="tool-error-card-content"] {
     position: relative;
-    padding-left: 24px;
+    padding-inline-start: 24px;
     margin-bottom: 8px;
     -webkit-user-select: text;
     user-select: text;
   }
 
   > [data-component="collapsible"].tool-collapsible[data-open="true"] [data-slot="tool-error-card-content"] {
-    padding-right: 40px;
+    padding-inline-end: 40px;
   }
 
   [data-slot="tool-error-card-copy"] {

packages/util/src/rtl.ts

@@ -0,0 +1,25 @@
+const RTL_LANGUAGES: ReadonlySet<string> = new Set([
+  "ar",
+  "arc",
+  "dv",
+  "fa",
+  "ha",
+  "he",
+  "khw",
+  "ks",
+  "ku",
+  "ps",
+  "sd",
+  "ug",
+  "ur",
+  "yi",
+])
+
+export function isRtl(lang: string) {
+  const code = lang.split("-")[0]?.toLowerCase() ?? ""
+  return RTL_LANGUAGES.has(code)
+}
+
+export function direction(lang: string) {
+  return isRtl(lang) ? "rtl" : "ltr"
+}