diff --git a/frontend/src/main-app.js b/frontend/src/main-app.js
index cecdaac..c6505bc 100644
--- a/frontend/src/main-app.js
+++ b/frontend/src/main-app.js
@@ -8,6 +8,7 @@ import { createRouteAssetRecovery, isReadOnlyRoute, isRouteAssetLoadError } from
 
 import './styles/element-services.css'
 import './assets/main.css'
+import './styles/action-layout.css'
 
 const isReservedResetPath = (pathname) => {
   let decoded = pathname.trim()
diff --git a/frontend/src/styles/action-layout.css b/frontend/src/styles/action-layout.css
new file mode 100644
index 0000000..76e8de9
--- /dev/null
+++ b/frontend/src/styles/action-layout.css
@@ -0,0 +1,191 @@
+/* 统一桌面端操作区：按钮横向排列、垂直居中，移动端保留页面自身布局。 */
+:where(
+  .action-row,
+  .overview-actions,
+  .form-actions,
+  .row-actions,
+  .dialog-footer,
+  .recovery-dialog-actions,
+  .external-dialog-actions,
+  .relay-item-actions,
+  .relay-editor-actions,
+  .totp-actions,
+  .telegram-actions,
+  .telegram-buttons,
+  .telegram-callback-actions,
+  .wechat-buttons,
+  .spam-actions,
+  .header-actions,
+  .selection-actions,
+  .composer-actions,
+  .mail-detail-state-actions,
+  .admin-recovery-actions,
+  .public-recovery-actions,
+  .verification-actions,
+  .log-page-actions,
+  .group-toolbar,
+  .credential-actions,
+  .config-pagination,
+) {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+:where(
+  .action-row,
+  .overview-actions,
+  .form-actions,
+  .row-actions,
+  .dialog-footer,
+  .recovery-dialog-actions,
+  .external-dialog-actions,
+  .relay-item-actions,
+  .relay-editor-actions,
+  .totp-actions,
+  .telegram-actions,
+  .telegram-buttons,
+  .telegram-callback-actions,
+  .wechat-buttons,
+  .spam-actions,
+  .header-actions,
+  .selection-actions,
+  .composer-actions,
+  .mail-detail-state-actions,
+  .admin-recovery-actions,
+  .public-recovery-actions,
+  .verification-actions,
+  .log-page-actions,
+  .group-toolbar,
+  .config-pagination,
+) > .el-button,
+:where(
+  .action-row,
+  .overview-actions,
+  .form-actions,
+  .row-actions,
+  .dialog-footer,
+  .recovery-dialog-actions,
+  .external-dialog-actions,
+  .relay-item-actions,
+  .relay-editor-actions,
+  .totp-actions,
+  .telegram-actions,
+  .telegram-buttons,
+  .telegram-callback-actions,
+  .wechat-buttons,
+  .spam-actions,
+  .header-actions,
+  .selection-actions,
+  .composer-actions,
+  .mail-detail-state-actions,
+  .admin-recovery-actions,
+  .public-recovery-actions,
+  .verification-actions,
+  .log-page-actions,
+  .group-toolbar,
+  .credential-actions,
+  .config-pagination,
+) .el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 0 !important;
+  vertical-align: middle;
+}
+
+@media (min-width: 769px) {
+  :where(
+    .action-row,
+    .overview-actions,
+    .form-actions,
+    .row-actions,
+    .dialog-footer,
+    .recovery-dialog-actions,
+    .external-dialog-actions,
+    .relay-item-actions,
+    .relay-editor-actions,
+    .totp-actions,
+    .telegram-actions,
+    .telegram-buttons,
+    .telegram-callback-actions,
+    .wechat-buttons,
+    .spam-actions,
+    .header-actions,
+    .selection-actions,
+    .composer-actions,
+    .mail-detail-state-actions,
+    .admin-recovery-actions,
+    .public-recovery-actions,
+    .verification-actions,
+    .log-page-actions,
+    .group-toolbar,
+    .credential-actions,
+    .config-pagination,
+    ) {
+    flex-direction: row;
+    flex-wrap: nowrap !important;
+  }
+
+  :where(
+    .action-row,
+    .overview-actions,
+    .form-actions,
+    .row-actions,
+    .dialog-footer,
+    .recovery-dialog-actions,
+    .external-dialog-actions,
+    .relay-item-actions,
+    .relay-editor-actions,
+    .totp-actions,
+    .telegram-actions,
+    .telegram-buttons,
+    .telegram-callback-actions,
+    .wechat-buttons,
+    .spam-actions,
+    .header-actions,
+    .selection-actions,
+    .composer-actions,
+    .mail-detail-state-actions,
+    .admin-recovery-actions,
+    .public-recovery-actions,
+    .verification-actions,
+    .log-page-actions,
+    .group-toolbar,
+    .credential-actions,
+    .config-pagination,
+    ) > .el-button,
+  :where(
+    .action-row,
+    .overview-actions,
+    .form-actions,
+    .row-actions,
+    .dialog-footer,
+    .recovery-dialog-actions,
+    .external-dialog-actions,
+    .relay-item-actions,
+    .relay-editor-actions,
+    .totp-actions,
+    .telegram-actions,
+    .telegram-buttons,
+    .telegram-callback-actions,
+    .wechat-buttons,
+    .spam-actions,
+    .header-actions,
+    .selection-actions,
+    .composer-actions,
+    .mail-detail-state-actions,
+    .admin-recovery-actions,
+    .public-recovery-actions,
+    .verification-actions,
+    .log-page-actions,
+    .group-toolbar,
+    .credential-actions,
+    .config-pagination,
+    ) .el-button {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+}