From 4f00492e49a4d8d2f9e3af15dfef2b247f4b912d Mon Sep 17 00:00:00 2001
From: Gabe <yugang2002@gmail.com>
Date: Sat, 15 Nov 2025 14:39:03 +0800
Subject: [PATCH] fix: Adjust popup UI

---
 src/views/Popup/PopupCont.js | 136 ++++++++++++++++++-----------------
 1 file changed, 72 insertions(+), 64 deletions(-)

diff --git a/src/views/Popup/PopupCont.js b/src/views/Popup/PopupCont.js
index 84ca143..9927161 100644
--- a/src/views/Popup/PopupCont.js
+++ b/src/views/Popup/PopupCont.js
@@ -342,73 +342,81 @@ export default function PopupCont({
         </Grid>
       </Grid>
 
-      <TextField
-        select
-        SelectProps={{ MenuProps: { disablePortal: true } }}
-        size="small"
-        value={apiSlug}
-        name="apiSlug"
-        label={i18n("translate_service")}
-        onChange={handleChange}
-      >
-        {optApis.map(({ key, name }) => (
-          <MenuItem key={key} value={key}>
-            {name}
-          </MenuItem>
-        ))}
-      </TextField>
+      <Stack direction="row" spacing={2}>
+        <TextField
+          select
+          SelectProps={{ MenuProps: { disablePortal: true } }}
+          size="small"
+          value={fromLang}
+          name="fromLang"
+          label={i18n("from_lang")}
+          onChange={handleChange}
+          fullWidth
+        >
+          {OPT_LANGS_FROM.map(([lang, name]) => (
+            <MenuItem key={lang} value={lang}>
+              {name}
+            </MenuItem>
+          ))}
+        </TextField>
 
-      <TextField
-        select
-        SelectProps={{ MenuProps: { disablePortal: true } }}
-        size="small"
-        value={fromLang}
-        name="fromLang"
-        label={i18n("from_lang")}
-        onChange={handleChange}
-      >
-        {OPT_LANGS_FROM.map(([lang, name]) => (
-          <MenuItem key={lang} value={lang}>
-            {name}
-          </MenuItem>
-        ))}
-      </TextField>
+        <TextField
+          select
+          SelectProps={{ MenuProps: { disablePortal: true } }}
+          size="small"
+          value={toLang}
+          name="toLang"
+          label={i18n("to_lang")}
+          onChange={handleChange}
+          fullWidth
+        >
+          {OPT_LANGS_TO.map(([lang, name]) => (
+            <MenuItem key={lang} value={lang}>
+              {name}
+            </MenuItem>
+          ))}
+        </TextField>
+      </Stack>
 
-      <TextField
-        select
-        SelectProps={{ MenuProps: { disablePortal: true } }}
-        size="small"
-        value={toLang}
-        name="toLang"
-        label={i18n("to_lang")}
-        onChange={handleChange}
-      >
-        {OPT_LANGS_TO.map(([lang, name]) => (
-          <MenuItem key={lang} value={lang}>
-            {name}
-          </MenuItem>
-        ))}
-      </TextField>
+      <Stack direction="row" spacing={2}>
+        <TextField
+          select
+          SelectProps={{ MenuProps: { disablePortal: true } }}
+          size="small"
+          value={apiSlug}
+          name="apiSlug"
+          label={i18n("translate_service")}
+          onChange={handleChange}
+          fullWidth
+        >
+          {optApis.map(({ key, name }) => (
+            <MenuItem key={key} value={key}>
+              {name}
+            </MenuItem>
+          ))}
+        </TextField>
 
-      <TextField
-        select
-        SelectProps={{ MenuProps: { disablePortal: true } }}
-        size="small"
-        value={textStyle}
-        name="textStyle"
-        label={
-          commands["toggleStyle"]
-            ? `${i18n("text_style_alt")}(${commands["toggleStyle"]})`
-            : i18n("text_style_alt")
-        }
-        onChange={handleChange}
-      >
-        {allTextStyles.map((item) => (
-          <MenuItem key={item.styleSlug} value={item.styleSlug}>
-            {item.styleName}
-          </MenuItem>
-        ))}
-      </TextField>
+        <TextField
+          select
+          SelectProps={{ MenuProps: { disablePortal: true } }}
+          size="small"
+          value={textStyle}
+          name="textStyle"
+          label={
+            commands["toggleStyle"]
+              ? `${i18n("text_style_alt")}(${commands["toggleStyle"]})`
+              : i18n("text_style_alt")
+          }
+          onChange={handleChange}
+          fullWidth
+        >
+          {allTextStyles.map((item) => (
+            <MenuItem key={item.styleSlug} value={item.styleSlug}>
+              {item.styleName}
+            </MenuItem>
+          ))}
+        </TextField>
+      </Stack>
 
       <Stack
         direction="row"