From 79cd9f0ed1ae7bc3400c75283c60d76ff175bcf2 Mon Sep 17 00:00:00 2001
From: NimBold <NimBold@users.noreply.github.com>
Date: Sun, 19 Jul 2026 02:53:37 +0330
Subject: [PATCH] fix(ui): stabilize side-aware RTL layout

Keep download columns in their default order, mirror sidebar badges by physical side, and reserve titlebar space for desktop controls.

Refs #17
---
 src/components/Sidebar.tsx |  8 +++----
 src/index.css              | 48 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 782dc93..ebb6b5f 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -126,7 +126,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
         onClick={() => onSelectFilter(filter)}
       >
         <Icon className="w-[18px] h-[18px] me-3 shrink-0" strokeWidth={isSelected ? 2.5 : 2} />
-        <span className="truncate">{label}</span>
+        <span className="sidebar-nav-label truncate">{label}</span>
         {getCount(filter) > 0 && (
           <span className="sidebar-count ms-auto min-w-5 px-1.5 py-0.5 rounded-full text-center text-[10px] leading-none font-bold">
             {getCount(filter)}
@@ -208,7 +208,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
         className="sidebar-nav-item group flex w-full items-center text-[13px] text-start cursor-default font-medium"
       >
         <List className="w-[18px] h-[18px] me-3 shrink-0" strokeWidth={isSelected ? 2.5 : 2} />
-        <span className="truncate">{queue.name}</span>
+        <span className="sidebar-nav-label truncate">{queue.name}</span>
         {getCount(filterId) > 0 && (
           <span className="sidebar-count ms-auto min-w-5 px-1.5 py-0.5 rounded-full text-center text-[10px] leading-none font-bold shrink-0">
             {getCount(filterId)}
@@ -228,7 +228,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
         className="sidebar-nav-item group flex w-full items-center text-[13px] text-start cursor-default font-medium"
       >
         <Icon className="w-[18px] h-[18px] me-3 shrink-0" strokeWidth={isSelected ? 2.5 : 2} />
-        <span>{label}</span>
+        <span className="sidebar-nav-label">{label}</span>
       </button>
     );
   };
@@ -341,7 +341,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
           className="sidebar-nav-item sidebar-settings-button group flex w-full items-center text-[13px] text-start cursor-default font-medium transition-colors"
         >
           <Settings className={`w-[18px] h-[18px] me-3 shrink-0 ${activeView === 'settings' ? 'text-white' : 'text-text-muted'}`} strokeWidth={activeView === 'settings' ? 2.5 : 2} />
-          <span>{t($ => $.navigation.settings)}</span>
+          <span className="sidebar-nav-label">{t($ => $.navigation.settings)}</span>
         </button>
       </div>
 
diff --git a/src/index.css b/src/index.css
index 7242e0a..c952ecd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1112,6 +1112,14 @@ html[data-list-density="relaxed"] {
     right: 124px;
   }
 
+  .app-sidebar-shell--left .sidebar-nav-item {
+    direction: ltr;
+  }
+
+  .app-sidebar-shell--right .sidebar-nav-item {
+    direction: rtl;
+  }
+
   .app-statusbar {
     height: 26px;
     font-size: 10px;
@@ -1686,6 +1694,11 @@ html[data-list-density="relaxed"] {
   background: hsl(var(--statusbar-bg));
 }
 
+.app-workspace--custom-window-controls .main-titlebar {
+  padding-left: 160px;
+  padding-right: 160px;
+}
+
 .app-workspace--sidebar-collapsed .main-titlebar {
   padding-left: 124px;
   padding-right: 18px;
@@ -1860,6 +1873,7 @@ html[data-list-density="relaxed"] {
 
 .download-table-header,
 .download-row {
+  direction: ltr;
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
@@ -2410,6 +2424,40 @@ html[dir="rtl"] .sidebar-inner .mr-3 {
     -2px 0 10px hsl(0 0% 0% / 0.20);
 }
 
+.app-sidebar-shell--left .sidebar-toggle-button {
+  inset-inline-start: auto;
+  inset-inline-end: auto;
+  left: auto;
+  right: 12px;
+}
+
+.app-sidebar-shell--right .sidebar-toggle-button {
+  inset-inline-start: auto;
+  inset-inline-end: auto;
+  left: 12px;
+  right: auto;
+}
+
+.app-sidebar-shell--left .sidebar-nav-item .sidebar-count {
+  margin-left: auto;
+  margin-right: 0;
+}
+
+.app-sidebar-shell--right .sidebar-nav-item .sidebar-count {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+.app-sidebar-shell--left .sidebar-nav-item > svg {
+  margin-left: 0;
+  margin-right: 0.75rem;
+}
+
+.app-sidebar-shell--right .sidebar-nav-item > svg {
+  margin-left: 0.75rem;
+  margin-right: 0;
+}
+
 html[dir="rtl"] .mac-switch::after {
   left: auto;
   right: 2px;