diff --git a/frontend/src/views/components/ConfigSettings/ConfigEditor/ConfigEditor.css b/frontend/src/views/components/ConfigSettings/ConfigEditor/ConfigEditor.css
index 05be4e3..c690289 100644
--- a/frontend/src/views/components/ConfigSettings/ConfigEditor/ConfigEditor.css
+++ b/frontend/src/views/components/ConfigSettings/ConfigEditor/ConfigEditor.css
@@ -187,4 +187,9 @@
   .config-page[data-config-page="mail"] .editor-footer .action-row {
     margin-top: 0;
   }
+
+  .config-page[data-config-page="mail"] .editor-footer {
+    margin-top: 4px;
+    padding-top: 4px;
+  }
 }
diff --git a/frontend/src/views/components/ConfigSettings/ConfigForm/ConfigForm.css b/frontend/src/views/components/ConfigSettings/ConfigForm/ConfigForm.css
index c745a40..fca3e48 100644
--- a/frontend/src/views/components/ConfigSettings/ConfigForm/ConfigForm.css
+++ b/frontend/src/views/components/ConfigSettings/ConfigForm/ConfigForm.css
@@ -94,20 +94,38 @@
 /* 邮件服务页在桌面抽屉中采用紧凑双列，移除策略后可在常见高度内完整展示。 */
 @container config-main (min-width: 360px) {
   .config-form[data-form-section="mail"] {
-    gap: 8px;
+    gap: 4px;
   }
 
   .config-form[data-form-section="mail"] .form-grid {
-    gap: 8px 12px;
+    gap: 5px 12px;
   }
 
   .config-form[data-form-section="mail"] .form-group + .form-group {
-    margin-top: 8px;
-    padding-top: 10px;
+    margin-top: 4px;
+    padding-top: 6px;
   }
 
   .config-form[data-form-section="mail"] .form-group-heading {
-    margin-bottom: 6px;
+    margin-bottom: 2px;
+  }
+
+  .config-form[data-form-section="mail"] :deep(.config-field) {
+    gap: 2px;
+  }
+
+  .config-form[data-form-section="mail"] :deep(.field-label) {
+    gap: 4px;
+    font-size: 12px;
+    line-height: 18px;
+    white-space: nowrap;
+  }
+
+  .config-form[data-form-section="mail"] :deep(.field-port-guide) {
+    min-height: 18px;
+    gap: 4px 8px;
+    font-size: 11px;
+    line-height: 18px;
   }
 }
 
diff --git a/test/frontend/config-form.test.mjs b/test/frontend/config-form.test.mjs
index 1e99701..480ed12 100644
--- a/test/frontend/config-form.test.mjs
+++ b/test/frontend/config-form.test.mjs
@@ -89,6 +89,21 @@ test('邮件服务页面只管理监听和中继，邮件策略使用独立表
   assert.ok(validateFormConfig('mail', { ...config, listener: { ...config.listener, tlsPort: 587 } })['listener.tlsPort'])
 })
 
+test('邮件服务全部启用时使用紧凑双列布局并完整保留字段与端口提示', () => {
+  const formCss = readFileSync(new URL('ConfigForm/ConfigForm.css', root), 'utf8')
+  const editorCss = readFileSync(new URL('ConfigEditor/ConfigEditor.css', root), 'utf8')
+  const compactBlock = formCss.match(
+    /@container config-main \(min-width: 360px\) \{([\s\S]*?)\n\}/
+  )?.[1] || ''
+
+  assert.match(compactBlock, /\.config-form\[data-form-section="mail"\] \.form-grid\s*\{[\s\S]*?gap: 5px 12px;/)
+  assert.match(compactBlock, /:deep\(\.field-label\)[\s\S]*?white-space: nowrap;/)
+  assert.match(compactBlock, /:deep\(\.field-port-guide\)[\s\S]*?min-height: 18px;/)
+  assert.doesNotMatch(compactBlock, /display:\s*none|visibility:\s*hidden/)
+  assert.match(formCss, /@media \(max-width: 768px\)[\s\S]*?grid-template-columns: minmax\(0, 1fr\);/)
+  assert.match(editorCss, /\.config-page\[data-config-page="mail"\] \.editor-footer\s*\{\s*margin-top: 4px;\s*padding-top: 4px;/)
+})
+
 test('三个插件页面只展示和编辑自身字段，完整保留其他插件和未知字段', () => {
   const config = { meta: { generation: 9 }, plugins: {
     spam_block: { enabled: false, settings: { threshold: 20 }, secretStatus: { configured: true } },