.api-edit-dialog { .mat-mdc-dialog-content { padding: 0; overflow: hidden; min-height: 500px; max-height: 80vh; display: flex; flex-direction: column; } .mat-mdc-tab-group { flex: 1; display: flex; flex-direction: column; } .mat-mdc-tab-body-wrapper { flex: 1; overflow: auto; } .tab-content { padding: 24px; overflow-y: auto; max-height: calc(80vh - 200px); } .section-title { font-size: 16px; font-weight: 500; margin: 24px 0 16px 0; color: #666; &:first-child { margin-top: 0; } } .headers-section { mat-form-field { width: calc(50% - 8px); margin-right: 16px; &:nth-child(2n) { margin-right: 0; } } } .add-header-button { margin-top: 8px; } .auth-fields { .token-fields { margin-top: 16px; padding: 16px; background-color: #f5f5f5; border-radius: 4px; } } .test-section { .test-url { margin-bottom: 24px; padding: 16px; background-color: #f5f5f5; border-radius: 4px; font-family: monospace; word-break: break-all; } .test-actions { display: flex; gap: 16px; margin-bottom: 24px; } .test-results { border: 1px solid #e0e0e0; border-radius: 4px; padding: 16px; background-color: #fafafa; pre { margin: 0; white-space: pre-wrap; word-break: break-word; } &.success { border-color: #4caf50; background-color: #f1f8e9; } &.error { border-color: #f44336; background-color: #ffebee; } } } .retry-settings { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; mat-form-field { flex: 1; } } mat-dialog-actions { padding: 16px 24px; margin: 0; border-top: 1px solid #e0e0e0; } // Form field density ::ng-deep { .mat-mdc-form-field { margin-bottom: 16px; } .mat-mdc-dialog-content { max-height: 80vh; } } }