diff --git a/src/components/ConfigDialog.module.scss b/src/components/ConfigDialog.module.scss
index 7550e5d..75f588a 100644
--- a/src/components/ConfigDialog.module.scss
+++ b/src/components/ConfigDialog.module.scss
@@ -69,56 +69,6 @@
     }
 }
 
-.inputContainer {
-    word-break: keep-all;
-
-    audio {
-        height: 30px;
-    }
-
-    input,
-    select {
-        flex-grow: 1;
-    }
-
-    input[type='file'] {
-        padding: 4px 12px;
-    }
-
-    input[type='checkbox'] {
-        flex-grow: 0;
-        width: 24px;
-        height: 24px;
-    }
-
-    input[type='color'] {
-        padding: 0 2px;
-        flex-grow: 0;
-        width: 30px;
-        height: 30px;
-    }
-
-    .label {
-        min-width: 74px;
-        opacity: 0.7;
-        font-weight: 600;
-    }
-
-    .imgPreview {
-        height: 30px;
-        border: 1px dashed rgb(0 0 0 / 30%);
-        min-width: 30px;
-        object-fit: contain;
-    }
-
-    &.required .label {
-        &::after {
-            content: '*';
-            color: red;
-        }
-    }
-}
-
 .dialog {
     text-align: left;
     overflow-y: auto;
@@ -185,18 +135,56 @@
             }
         }
     }
+}
 
-    input {
-        &:not([type='checkbox']) {
-            width: 100%;
-        }
+.inputContainer {
+    word-break: keep-all;
 
-        max-width: 100%;
+    audio {
+        height: 30px;
+    }
+
+    input,
+    select {
+        width: 100%;
         box-sizing: border-box;
     }
 
     input[type='file'] {
-        padding: 3px 12px;
+        padding: 4px 12px;
+    }
+
+    input[type='checkbox'] {
+        flex-grow: 0;
+        width: 24px;
+        height: 24px;
+    }
+
+    input[type='color'] {
+        padding: 0 2px;
+        flex-grow: 0;
+        width: 30px;
+        height: 30px;
+    }
+
+    .label {
+        min-width: 74px;
+        opacity: 0.7;
+        font-weight: 600;
+    }
+
+    .imgPreview {
+        height: 30px;
+        border: 1px dashed rgb(0 0 0 / 30%);
+        min-width: 30px;
+        object-fit: contain;
+    }
+
+    &.required .label {
+        &::after {
+            content: '*';
+            color: red;
+        }
     }
 }
 
@@ -218,6 +206,16 @@
         align-items: center;
         gap: 8px;
 
+        input {
+            width: 100%;
+            max-width: 100%;
+            box-sizing: border-box;
+        }
+
+        input[type='file'] {
+            padding: 3px 12px;
+        }
+
         .iconPreview {
             height: 109px;
             width: 109px;
diff --git a/src/components/ConfigDialog.tsx b/src/components/ConfigDialog.tsx
index 65bc2bd..92b993a 100644
--- a/src/components/ConfigDialog.tsx
+++ b/src/components/ConfigDialog.tsx
@@ -461,36 +461,43 @@ const ConfigDialog: FC<{
                         />
                     )}
                 </div>
-                <div className={'flex-container flex-center flex-no-wrap'}>
-                    <span>毛玻璃</span>
-                    <input
-                        type={'checkbox'}
-                        checked={!!customTheme.backgroundBlur}
-                        onChange={(e) =>
-                            updateCustomTheme(
-                                'backgroundBlur',
-                                e.target.checked
-                            )
-                        }
-                    />
-                    <div className={'flex-spacer'} />
-                    <span>深色</span>
-                    <input
-                        type={'checkbox'}
-                        checked={!!customTheme.dark}
-                        onChange={(e) =>
-                            updateCustomTheme('dark', e.target.checked)
-                        }
-                    />
-                    <div className={'flex-spacer'} />
-                    <span>纯色</span>
-                    <input
-                        type={'color'}
-                        value={customTheme.backgroundColor || '#ffffff'}
-                        onChange={(e) =>
-                            updateCustomTheme('backgroundColor', e.target.value)
-                        }
-                    />
+                <div className={'flex-container flex-center flex-wrap'}>
+                    <div className={'flex-spacer flex-container flex-center'}>
+                        <span>毛玻璃</span>
+                        <input
+                            type={'checkbox'}
+                            checked={!!customTheme.backgroundBlur}
+                            onChange={(e) =>
+                                updateCustomTheme(
+                                    'backgroundBlur',
+                                    e.target.checked
+                                )
+                            }
+                        />
+                    </div>
+                    <div className={'flex-spacer flex-container flex-center'}>
+                        <span>深色</span>
+                        <input
+                            type={'checkbox'}
+                            checked={!!customTheme.dark}
+                            onChange={(e) =>
+                                updateCustomTheme('dark', e.target.checked)
+                            }
+                        />
+                    </div>
+                    <div className={'flex-spacer flex-container flex-center'}>
+                        <span>纯色</span>
+                        <input
+                            type={'color'}
+                            value={customTheme.backgroundColor || '#ffffff'}
+                            onChange={(e) =>
+                                updateCustomTheme(
+                                    'backgroundColor',
+                                    e.target.value
+                                )
+                            }
+                        />
+                    </div>
                 </div>
                 <div className={style.tip}>
                     使用图片或者纯色作为背景，图片可开启毛玻璃效果。如果你使用了深色的图片和颜色，请开启深色模式，此时标题等文字将变为亮色