From 6d42086fa7be211862925ae774029ed9ea7aa94f Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sat, 13 Dec 2025 12:14:12 +0800
Subject: [PATCH] fix(layout): fixed the layout of the selector of the
 translator providers (#2701)

---
 .../components/annotator/TranslatorPopup.tsx       | 14 ++++++--------
 apps/readest-app/src/hooks/useTranslator.ts        |  3 ++-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/annotator/TranslatorPopup.tsx b/apps/readest-app/src/app/reader/components/annotator/TranslatorPopup.tsx
index 9508e7cf..5b029af3 100644
--- a/apps/readest-app/src/app/reader/components/annotator/TranslatorPopup.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/TranslatorPopup.tsx
@@ -211,14 +211,12 @@ const TranslatorPopup: React.FC<TranslatorPopupProps> = ({
                   })}
             </div>
           )}
-          <div className='ml-auto'>
-            <Select
-              className='bg-gray-600 text-white/75'
-              value={provider}
-              onChange={handleProviderChange}
-              options={providers.map(({ name: value, label }) => ({ value, label }))}
-            />
-          </div>
+          <Select
+            className='bg-gray-600 text-white/75'
+            value={provider}
+            onChange={handleProviderChange}
+            options={providers.map(({ name: value, label }) => ({ value, label }))}
+          />
         </div>
       </Popup>
     </div>
diff --git a/apps/readest-app/src/hooks/useTranslator.ts b/apps/readest-app/src/hooks/useTranslator.ts
index d50f9c81..493f1802 100644
--- a/apps/readest-app/src/hooks/useTranslator.ts
+++ b/apps/readest-app/src/hooks/useTranslator.ts
@@ -4,6 +4,7 @@ import { ErrorCodes, getTranslator, getTranslators, TranslatorName } from '@/ser
 import { getFromCache, storeInCache, UseTranslatorOptions } from '@/services/translators';
 import { polish, preprocess } from '@/services/translators';
 import { eventDispatcher } from '@/utils/event';
+import { getLocale } from '@/utils/misc';
 import { useTranslation } from './useTranslation';
 
 export function useTranslator({
@@ -42,7 +43,7 @@ export function useTranslator({
       options?: { source?: string; target?: string; useCache?: boolean },
     ): Promise<string[]> => {
       const sourceLanguage = options?.source || sourceLang;
-      const targetLanguage = options?.target || targetLang;
+      const targetLanguage = options?.target || targetLang || getLocale();
       const useCache = options?.useCache ?? false;
       const textsToTranslate = enablePreprocessing ? preprocess(input) : input;