fixed sonarr layout

code/UI/src/app/settings/sonarr/sonarr-settings.component.html

@@ -127,13 +127,7 @@
           
           <div class="instance-content">
             <div class="instance-field">
-              <label>URL</label>
-              <span class="field-value">{{ instance.url }}</span>
-            </div>
-            
-            <div class="instance-field">
-              <label>API Key</label>
-              <span class="field-value api-key">{{ instance.apiKey | slice:0:8 }}...</span>
+              <label>{{ instance.url }}</label>
             </div>
           </div>
         </div>

code/UI/src/app/settings/sonarr/sonarr-settings.component.scss

@@ -2,151 +2,4 @@
 
 @import '../styles/settings-shared.scss';
 @import '../styles/arr-shared.scss';
-
-/* Sonarr-specific styles that extend the base settings styles */
-::ng-deep {
-  /* Instance-specific styling */
-  .instances-list {
-    .instance-item {
-      border: 1px solid var(--surface-border);
-      border-radius: var(--border-radius);
-      margin-bottom: 1rem;
-      padding: 1rem;
-      background-color: var(--surface-50);
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
-      
-      .instance-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 0.75rem;
-        
-        .instance-title {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-          
-          .instance-icon {
-            color: var(--primary-color);
-          }
-          
-          .instance-name {
-            font-weight: 600;
-            color: var(--text-color);
-          }
-        }
-        
-        .instance-actions {
-          display: flex;
-          gap: 0.25rem;
-        }
-      }
-      
-      .instance-content {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 1rem;
-        
-        .instance-field {
-          label {
-            display: block;
-            font-size: 0.85rem;
-            font-weight: 600;
-            color: var(--text-color-secondary);
-            margin-bottom: 0.25rem;
-          }
-          
-          .field-value {
-            color: var(--text-color);
-            
-            &.api-key {
-              font-family: monospace;
-              font-size: 0.9rem;
-            }
-          }
-        }
-      }
-    }
-  }
-  
-  .empty-instances-message {
-    .empty-icon {
-      font-size: 3rem;
-      color: var(--text-color-secondary);
-      margin-bottom: 1rem;
-    }
-  }
-  
-  .disabled-overlay {
-    position: relative;
-    background-color: rgba(255, 255, 255, 0.8);
-    border-radius: var(--border-radius);
-    padding: 2rem;
-    text-align: center;
-    
-    .disabled-message {
-      color: var(--text-color-secondary);
-      
-      i {
-        font-size: 2rem;
-        margin-bottom: 1rem;
-        display: block;
-      }
-      
-      p {
-        margin: 0;
-        font-weight: 500;
-      }
-    }
-  }
-  
-  /* Instance Modal specific styling */
-  .instance-modal {
-    .instance-form {
-      .field {
-        margin-bottom: 1.5rem;
-        
-        &:last-child {
-          margin-bottom: 0;
-        }
-        
-        label {
-          display: block;
-          margin-bottom: 0.5rem;
-          font-weight: 500;
-          color: var(--text-color);
-        }
-      }
-    }
-    
-    .modal-footer {
-      display: flex;
-      justify-content: flex-end;
-      gap: 0.5rem;
-    }
-  }
-  
-  /* Responsive adjustments for instance list */
-  @media screen and (max-width: 768px) {
-    .instances-list {
-      .instance-item {
-        .instance-header {
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 0.75rem;
-          
-          .instance-actions {
-            align-self: flex-end;
-          }
-        }
-        
-        .instance-content {
-          grid-template-columns: 1fr;
-        }
-      }
-    }
-  }
-}
+@import '../settings-page/settings-page.component.scss';

code/UI/src/app/settings/styles/arr-shared.scss

@@ -66,7 +66,6 @@
   .instance-field {
     display: flex;
     flex-direction: column;
-    margin-bottom: 1rem;
     
     @media (min-width: 768px) {
       flex-direction: row;