feat: The translation box can be set to adaptive height

src/config/i18n.js

@@ -1349,6 +1349,11 @@ export const I18N = {
     en: `Transbox Follow Selection`,
     zh_TW: `翻譯框跟隨選取文字`,
   },
+  tranbox_auto_height: {
+    zh: `翻译框自适应高度`,
+    en: `Translation box adaptive height`,
+    zh_TW: `翻譯框自適應高度`,
+  },
   translate_start_hook: {
     zh: `翻译开始钩子函数`,
     en: `Translate Start Hook`,

src/config/setting.js

@@ -88,6 +88,7 @@ export const DEFAULT_TRANBOX_SETTING = {
   hideClickAway: false, // 是否点击外部关闭弹窗
   simpleStyle: false, // 是否简洁界面
   followSelection: false, // 翻译框是否跟随选中文本
+  autoHeight: false, // 自适应高度
   triggerMode: OPT_TRANBOX_TRIGGER_CLICK, // 触发翻译方式
   // extStyles: "", // 附加样式
   enDict: OPT_DICT_BING, // 英文词典

src/views/Options/Tranbox.js

@@ -68,6 +68,7 @@ export default function Tranbox() {
     hideClickAway = false,
     simpleStyle = false,
     followSelection = false,
+    autoHeight = false,
     triggerMode = OPT_TRANBOX_TRIGGER_CLICK,
     // extStyles = "",
     enDict = OPT_DICT_BING,
@@ -330,6 +331,20 @@ export default function Tranbox() {
                 max={200}
               />
             </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                select
+                size="small"
+                name="autoHeight"
+                value={autoHeight}
+                label={i18n("tranbox_auto_height")}
+                onChange={handleChange}
+              >
+                <MenuItem value={false}>{i18n("disable")}</MenuItem>
+                <MenuItem value={true}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
             {!isExt && (
               <Grid item xs={12} sm={12} md={6} lg={3}>
                 <ShortcutInput

src/views/Selection/DraggableResizable.js

@@ -150,6 +150,7 @@ export default function DraggableResizable({
   setPosition,
   onChangeSize,
   onChangePosition,
+  autoHeight,
   ...props
 }) {
   const lineWidth = 4;
@@ -222,11 +223,19 @@ export default function DraggableResizable({
         </Pointer>
         <Box
           className="KT-draggable-container"
-          style={{
+          style={
-            width: size.w,
+            autoHeight
-            height: size.h,
+              ? {
-            overflow: "hidden auto",
+                  width: size.w,
-          }}
+                  maxHeight: size.h,
+                  overflow: "hidden auto",
+                }
+              : {
+                  width: size.w,
+                  height: size.h,
+                  overflow: "hidden auto",
+                }
+          }
         >
           {children}
         </Box>

src/views/Selection/TranBox.js

@@ -115,7 +115,15 @@ export default function TranBox({
   text,
   setText,
   setShowBox,
-  tranboxSetting: { enDict, enSug, apiSlugs, fromLang, toLang, toLang2 },
+  tranboxSetting: {
+    enDict,
+    enSug,
+    apiSlugs,
+    fromLang,
+    toLang,
+    toLang2,
+    autoHeight,
+  },
   transApis,
   boxSize,
   setBoxSize,
@@ -141,6 +149,7 @@ export default function TranBox({
             size={boxSize}
             setSize={setBoxSize}
             setPosition={setBoxPosition}
+            autoHeight={autoHeight}
             header={
               <Header
                 setShowBox={setShowBox}