From e3929dc2ff501fb137654a8989253445bb4c98e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BA=A2?= <wxh1220@gmail.com>
Date: Tue, 6 Feb 2024 16:16:32 +0800
Subject: [PATCH] :globe_with_meridians: style: improve direction UX (#1169)

---
 src/layout/GlobalLayout/Locale.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/layout/GlobalLayout/Locale.tsx b/src/layout/GlobalLayout/Locale.tsx
index 489c97d8e5184..ec0fde17d94f7 100644
--- a/src/layout/GlobalLayout/Locale.tsx
+++ b/src/layout/GlobalLayout/Locale.tsx
@@ -1,5 +1,6 @@
 import { ConfigProvider } from 'antd';
 import { PropsWithChildren, memo, useEffect, useState } from 'react';
+import { isRtlLang } from 'rtl-detect';
 import useSWR from 'swr';
 
 import { createI18nNext } from '@/locales/create';
@@ -67,7 +68,14 @@ const Locale = memo<LocaleLayoutProps>(({ children, defaultLang }) => {
     };
   }, [i18n]);
 
-  return <ConfigProvider locale={locale}>{children}</ConfigProvider>;
+  // detect document direction
+  const documentDir = isRtlLang(lang!) ? 'rtl' : 'ltr';
+
+  return (
+    <ConfigProvider direction={documentDir} locale={locale}>
+      {children}
+    </ConfigProvider>
+  );
 });
 
 export default Locale;