From a99afa4c76e06b4ac7ff3f9ad49e6c4f9bbf6541 Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Sun, 27 Sep 2026 14:08:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=B3=BB=E7=BB=9F=E5=8F=91?=
 =?UTF-8?q?=E4=BF=A1=E9=85=8D=E7=BD=AE=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SystemNotification/SystemNotification.css | 121 ++++++++++++++++++
 1 file changed, 121 insertions(+)

diff --git a/frontend/src/views/components/SystemNotification/SystemNotification.css b/frontend/src/views/components/SystemNotification/SystemNotification.css
index aa2fa1e..7139fb1 100644
--- a/frontend/src/views/components/SystemNotification/SystemNotification.css
+++ b/frontend/src/views/components/SystemNotification/SystemNotification.css
@@ -407,3 +407,124 @@
     box-sizing: border-box;
   }
 }
+
+
+.notification-settings:has(> .notification-manager-panel) {
+  gap: 6px 8px;
+  padding: 8px 10px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-manager-panel,
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel {
+  padding: 8px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-manager-panel h3,
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel h3 {
+  margin-bottom: 4px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns {
+  gap: 4px 8px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel :deep(.el-form-item) {
+  margin-bottom: 4px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel :deep(.el-form-item__label) {
+  margin-bottom: 1px;
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-limits {
+  gap: 4px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-actions {
+  gap: 4px;
+  margin-top: 2px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-actions :deep(.el-button) {
+  min-height: 28px;
+  padding: 5px 10px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel :deep(.el-descriptions__header) {
+  margin-bottom: 2px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel :deep(.el-descriptions__title) {
+  font-size: 12px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel :deep(.el-descriptions__cell) {
+  padding: 3px 5px;
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel :deep(.el-descriptions__label) {
+  width: 88px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-hint {
+  margin: 2px 0;
+  font-size: 10px;
+  line-height: 1.2;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel > .el-alert {
+  padding: 4px 8px;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel > .el-alert :deep(.el-alert__title),
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel > .el-alert :deep(.el-alert__description) {
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .el-alert :deep(.el-alert__description) {
+  display: none;
+}
+
+.notification-settings:has(> .notification-manager-panel) .notification-header p {
+  display: none;
+}
+
+/* The SMTP table is a dense read-only summary, so pair two records per row on desktop. */
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-descriptions ~ .el-descriptions) .el-descriptions__body > table {
+  display: block;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-descriptions ~ .el-descriptions) .el-descriptions__body > table > tbody {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-descriptions ~ .el-descriptions) .el-descriptions__body > table > tbody > tr {
+  display: grid;
+  grid-template-columns: 78px minmax(0, 1fr);
+  min-width: 0;
+}
+
+.notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-descriptions ~ .el-descriptions) .el-descriptions__body > table > tbody > tr > td {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 920px) {
+  .notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-descriptions ~ .el-descriptions) .el-descriptions__body > table {
+    display: table;
+  }
+
+  .notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-descriptions ~ .el-descriptions) .el-descriptions__body > table > tbody {
+    display: table-row-group;
+  }
+
+  .notification-settings:has(> .notification-manager-panel) > .notification-detail-panel .notification-columns > :deep(.el-descriptions ~ .el-descriptions) .el-descriptions__body > table > tbody > tr {
+    display: table-row;
+  }
+}