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;
+  }
+}