Update manager-aiservices.component.scss

Cleaned up code, aligned subtitles and form fields from the base. Aligned submit button.

src/app/manager-dashboard/manager-aiservices.component.scss

@@ -15,6 +15,7 @@
   display: grid;
   grid-template-columns: 1.5fr 4fr; 
   width: 100%;
+  align-items: baseline;
   gap: 20px;  
 }
 
@@ -25,7 +26,19 @@
   line-height: 1.5;
 }
 
-/* tablet*/
+.update-button-container {
+  display: flex;
+  justify-content: center; 
+  width: 100%; 
+  margin-top: 20px;
+}
+
+.update-button-container button {
+  width: auto; 
+  margin-left: 0; 
+}
+
+/* Targetting tablet screens*/
 @media (max-width: 768px) {
   .container {
     padding: 15px;  
@@ -36,7 +49,6 @@
     margin: 0;   
   }
 
-  /* container */
   .list-item-content {
     display: flex;
     justify-content: space-between;
@@ -53,18 +65,16 @@
     line-height: 1.5; 
   }
 
-  /* form field */
   mat-form-field {
     flex-basis: 70%; 
   }
 
   input {
     width: 100%;
   }
-
 }
 
-/* Mobile*/
+/* Targetting mobile screens*/
 @media (max-width: 576px) {
   .container {
     padding: 10px;
@@ -75,7 +85,6 @@
     margin: 0;
   }
 
-  /* container*/
   .list-item-content {
     display: flex;
     flex-direction: row;
@@ -86,17 +95,23 @@
     overflow-x: hidden;  
   }
 
-  /* Subtitle */
   .list-item-content > span {
     flex-basis: 35%;  
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
   }
 
-  /*form field*/
   mat-form-field {
     flex-basis: 80%;  
     min-width: 0;  
   }
+
+  .update-button-container {
+    justify-content: flex-start;
+  }
+
+  .update-button-container button {
+    width: auto; 
+  }
 }