fix(layout): fixed the layout of the selector of the translator providers (#2701)

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>

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;