Fix edit theme dialog layout again

Ensures that the layout looks better and doesn't get out of place in the
smallest windows and largest fonts, as well as in both English and
Chinese environments.

src/lang/en-us.json

@@ -680,7 +680,7 @@
   "theme_edit_modal__pick_color": "Choose color",
   "theme_edit_modal__pick_last_color": "Use previous color",
   "theme_edit_modal__pick_save": "Confirm",
-  "theme_edit_modal__preview": "Preview Theme",
+  "theme_edit_modal__preview": "Preview",
   "theme_edit_modal__primary": "Theme Color",
   "theme_edit_modal__remove": "Remove",
   "theme_edit_modal__remove_tip": "Do you really want to remove this theme?",

src/renderer/views/Setting/components/ThemeEditModal/index.vue

@@ -103,13 +103,17 @@
       <!-- <div :class="$style.note">
         <p>{{ $t('theme_selector_modal__title_tip') }}</p>
       </div> -->
-      <div :class="$style.footer">
+      <div :class="$style.footerChkBox">
         <div :class="$style.subContent">
-          <base-input v-model="themeName" :class="$style.input" :placeholder="$t('theme_selector_modal__theme_name')" />
           <base-checkbox id="theme_edit_modal__dark" v-model="isDark" :class="$style.checkbox" :label="$t('theme_edit_modal__dark')" @change="handleDark" />
           <base-checkbox id="theme_edit_modal__dark_font" v-model="isDarkFont" :class="$style.checkbox" :label="$t('theme_edit_modal__dark_font')" @change="handleDarkFont" />
           <base-checkbox id="theme_edit_modal__preview" v-model="preview" :class="$style.checkbox" :label="$t('theme_edit_modal__preview')" @change="handlePreview" />
         </div>
+      </div>
+      <div :class="$style.footer">
+        <div :class="$style.subContent">
+          <base-input v-model="themeName" :class="$style.input" :placeholder="$t('theme_selector_modal__theme_name')" />
+        </div>
         <div :class="$style.subContent">
           <base-btn v-if="themeId" :class="$style.btn" @click="handleRemove">{{ $t('theme_edit_modal__remove') }}</base-btn>
           <base-btn v-if="themeId" :class="$style.btn" @click="handleSaveNew">{{ $t('theme_edit_modal__save_new') }}</base-btn>
@@ -766,11 +770,32 @@ export default {
   //   }
   // }
 }
-.footer {
+
+.footerChkBox {
   padding: 15px;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
+  justify-content: right;
+  gap: 15px;
+  font-size: 14px;
+  .subContent {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 15px;
+  }
+
+  .checkbox {
+    flex: none;
+  }
+}
+
+.footer {
+  padding: 15px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
   justify-content: space-between;
   gap: 15px;
   font-size: 14px;
@@ -785,7 +810,7 @@ export default {
     flex: none;
   }
   .input {
-    min-width: 0;
+    max-width: 140px;
     flex: 0 1 auto;
   }
 }