diff --git a/frontend/src/views/components/SystemNotification/SystemNotification.css b/frontend/src/views/components/SystemNotification/SystemNotification.css index 15aa5f5..002e6a7 100644 --- a/frontend/src/views/components/SystemNotification/SystemNotification.css +++ b/frontend/src/views/components/SystemNotification/SystemNotification.css @@ -219,3 +219,130 @@ box-sizing: border-box; } } + +/* Desktop manager layout: keep the authorization list and selected account settings visible together. */ +.notification-settings:has(> .notification-panel .el-table) { + display: grid; + grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr); + align-items: start; + gap: 12px; + min-width: 0; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-header, +.notification-settings:has(> .notification-panel .el-table) > .el-alert { + grid-column: 1 / -1; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:first-of-type { + grid-column: 1; + min-width: 0; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) { + grid-column: 2; + min-width: 0; + padding: 14px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:first-of-type h3 { + margin-bottom: 8px; +} + +.notification-settings:has(> .notification-panel .el-table) :deep(.el-table .cell) { + padding-inline: 8px; + line-height: 1.35; +} + +.notification-settings:has(> .notification-panel .el-table) :deep(.el-table__cell) { + padding-block: 7px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:first-of-type .el-pagination { + margin-top: 8px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-heading { + margin-bottom: 8px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-credential { + margin: 8px 0; + padding: 8px 10px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns { + display: grid; + grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); + gap: 10px 14px; + align-items: start; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-form) { + grid-column: 1; + grid-row: 1; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-descriptions) { + grid-column: 1; + grid-row: 2; + min-width: 0; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-descriptions ~ .el-descriptions) { + grid-column: 2; + grid-row: 1 / span 2; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.notification-hint) { + grid-column: 1; + grid-row: 3; + margin: 0; + font-size: 12px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-descriptions ~ .el-descriptions + .notification-hint) { + grid-column: 2; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > :deep(.el-alert) { + grid-column: 1 / -1; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) :deep(.el-form-item) { + margin-bottom: 10px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-limits { + gap: 8px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) :deep(.el-descriptions__header) { + margin-bottom: 6px; +} + +.notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) :deep(.el-descriptions__cell) { + padding: 7px 10px; +} + +@media (max-width: 920px) { + .notification-settings:has(> .notification-panel .el-table) { + display: flex; + flex-direction: column; + } + + .notification-settings:has(> .notification-panel .el-table) > .notification-panel { + width: 100%; + box-sizing: border-box; + } + + .notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns { + display: flex; + flex-direction: column; + } + + .notification-settings:has(> .notification-panel .el-table) > .notification-panel:nth-of-type(2) .notification-columns > * { + width: 100%; + box-sizing: border-box; + } +}