From f47eb7507fcd94fbe054d6f9d0b4a9fee023b221 Mon Sep 17 00:00:00 2001
From: NimBold <NimBold@users.noreply.github.com>
Date: Sun, 19 Jul 2026 04:07:33 +0330
Subject: [PATCH] fix(ui): preserve LTR left sidebar in RTL

Keep the left sidebar geometry stable across RTL locales and retain the default settings-tab order.

Refs #17
---
 src/App.tsx   |  5 ++++-
 src/index.css | 53 ++++++++++++++++++++++-----------------------------
 2 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0b6f981..41b627a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -958,7 +958,10 @@ function App() {
           marginInlineEnd: isSidebarVisible || !isSidebarOnRight ? 0 : -sidebarWidth
         }}
       >
-        <div className="app-sidebar-panel h-full w-full">
+        <div
+          className="app-sidebar-panel h-full w-full"
+          dir={isSidebarOnRight ? undefined : 'ltr'}
+        >
           <Sidebar
             selectedFilter={filter}
             onSelectFilter={(f) => {
diff --git a/src/index.css b/src/index.css
index 42af95a..6527caa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1122,16 +1122,6 @@ html[data-list-density="relaxed"] {
     text-align: right;
   }
 
-  html[dir="ltr"] .sidebar-nav-label {
-    direction: ltr;
-    unicode-bidi: isolate;
-  }
-
-  html[dir="rtl"] .sidebar-nav-label {
-    direction: rtl;
-    unicode-bidi: isolate;
-  }
-
   .app-statusbar {
     height: 26px;
     font-size: 10px;
@@ -1339,6 +1329,7 @@ html[data-list-density="relaxed"] {
 
   .settings-tab-strip {
     padding: 16px 32px;
+    direction: ltr;
   }
 
   .settings-tab-button {
@@ -2421,26 +2412,6 @@ html[dir="rtl"] input[type="number"] {
   unicode-bidi: isolate;
 }
 
-html[dir="rtl"] .sidebar-nav-item > svg {
-  margin-right: 0;
-  margin-left: 0.75rem;
-}
-
-html[dir="rtl"] .sidebar-nav-item .sidebar-count {
-  margin-left: 0;
-  margin-right: auto;
-}
-
-html[dir="rtl"] .sidebar-inner .mr-2 {
-  margin-right: 0;
-  margin-left: 0.5rem;
-}
-
-html[dir="rtl"] .sidebar-inner .mr-3 {
-  margin-right: 0;
-  margin-left: 0.75rem;
-}
-
 .app-sidebar-shell--right .app-sidebar-panel {
   box-shadow:
     inset 0 1px 0 hsl(0 0% 100% / 0.045),
@@ -2449,6 +2420,13 @@ html[dir="rtl"] .sidebar-inner .mr-3 {
 
 .app-sidebar-shell--left .app-sidebar-panel {
   direction: ltr;
+  text-align: left;
+}
+
+.app-sidebar-shell--left .sidebar-section-label,
+.app-sidebar-shell--left .sidebar-section-label-toggle {
+  direction: ltr;
+  text-align: left;
 }
 
 .app-sidebar-shell--left .sidebar-toggle-button {
@@ -2480,11 +2458,26 @@ html[dir="rtl"] .sidebar-inner .mr-3 {
   margin-right: 0.75rem;
 }
 
+.app-sidebar-shell--left .sidebar-nav-label {
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
 .app-sidebar-shell--right .sidebar-nav-item > svg {
   margin-left: 0.75rem;
   margin-right: 0;
 }
 
+html[dir="ltr"] .app-sidebar-shell--right .sidebar-nav-label {
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
+html[dir="rtl"] .app-sidebar-shell--right .sidebar-nav-label {
+  direction: rtl;
+  unicode-bidi: isolate;
+}
+
 html[dir="rtl"] .mac-switch::after {
   left: auto;
   right: 2px;