From 4c0daf40c0da92ecca4f1f6ae8d339461e703151 Mon Sep 17 00:00:00 2001
From: Yaowei Zou <yaowei_zou@icloud.com>
Date: Fri, 21 Feb 2025 11:51:53 +0800
Subject: [PATCH] fix: Fix RTL direction spacing errors and sidebar dragging
 functionality errors.

---
 app/components/home.module.scss | 31 +++++++++----------------------
 app/components/sidebar.tsx      |  8 ++++++--
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/app/components/home.module.scss b/app/components/home.module.scss
index 381b6a9b9..ef4ee3c55 100644
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -52,13 +52,10 @@
   .sidebar-header-bar {
     display: flex;
     margin-bottom: 20px;
+    gap: 10px;
 
     .sidebar-bar-button {
       flex-grow: 1;
-
-      &:not(:last-child) {
-        margin-right: 10px;
-      }
     }
   }
 
@@ -252,13 +249,6 @@
 
   .sidebar-header-bar {
     flex-direction: column;
-
-    .sidebar-bar-button {
-      &:not(:last-child) {
-        margin-right: 0;
-        margin-bottom: 10px;
-      }
-    }
   }
 
   .chat-item {
@@ -308,15 +298,10 @@
   .sidebar-tail {
     flex-direction: column-reverse;
     align-items: center;
+    gap: 15px;
 
     .sidebar-actions {
-      flex-direction: column-reverse;
-      align-items: center;
-
-      .sidebar-action {
-        margin-right: 0;
-        margin-top: 15px;
-      }
+      display: contents;
     }
   }
 }
@@ -329,10 +314,7 @@
 
 .sidebar-actions {
   display: inline-flex;
-}
-
-.sidebar-action:not(:last-child) {
-  margin-right: 15px;
+  gap: 15px;
 }
 
 .loading-content {
@@ -346,4 +328,9 @@
 
 .rtl-screen {
   direction: rtl;
+
+  .sidebar-drag {
+    right: unset;
+    left: 0;
+  }
 }
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 56bc5bb43..1d7e43334 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -13,7 +13,7 @@ import McpIcon from "../icons/mcp.svg";
 import DragIcon from "../icons/drag.svg";
 import DiscoveryIcon from "../icons/discovery.svg";
 
-import Locale from "../locales";
+import Locale, { getLang } from "../locales";
 
 import { useAppConfig, useChatStore } from "../store";
 
@@ -91,7 +91,11 @@ export function useDragSideBar() {
         return;
       }
       lastUpdateTime.current = Date.now();
-      const d = e.clientX - startX.current;
+      let d = e.clientX - startX.current;
+      // If text and other elements go from right to left
+      if (getLang() === "ar") {
+        d = -1 * d;
+      }
       const nextWidth = limit(startDragWidth.current + d);
       config.update((config) => {
         if (nextWidth < MIN_SIDEBAR_WIDTH) {