[ACS-7331] - View details sidebar (#9455)

lib/core/src/lib/comments/comments.component.html

@@ -3,12 +3,12 @@
         {{'COMMENTS.HEADER' | translate: { count: comments?.length } }}
     </div>
     <div *ngIf="!readOnly" class="adf-comments-input-container adf-comments-divider">
-            <mat-form-field>
+            <mat-form-field class="adf-comments-form-field" subscriptSizing="dynamic">
+                <mat-label>{{'COMMENTS.ADD' | translate}}</mat-label>
                 <textarea
                     matInput
                     id="comment-input"
                     [attr.aria-label]="'COMMENTS.ADD' | translate"
-                    placeholder="{{'COMMENTS.ADD' | translate}}"
                     [(ngModel)]="message"
                     (keydown.escape)="clearMessage($event)"
                 >

lib/core/src/lib/comments/comments.component.scss

@@ -5,6 +5,24 @@ adf-comments {
         height: 100%;
         width: 100%;
         overflow: auto;
+
+        .adf-comments-input-container {
+            width: 100%;
+            padding-bottom: 8px;
+
+            textarea {
+                resize: vertical;
+            }
+
+            #{$mat-form-field} {
+                padding-bottom: 12px;
+                width: 100%;
+            }
+
+            #{$mat-form-field-infix} {
+                padding-bottom: 0;
+            }
+        }
     }
 
     .adf-comments-divider {
@@ -15,24 +33,16 @@ adf-comments {
         padding: 10px 0;
         font-size: var(--theme-body-1-font-size);
         font-weight: 600;
-        margin: 0;
-    }
-
-    .adf-comments-input-container {
-        width: 100%;
-        padding: 8px 0;
-
-        textarea {
-            resize: vertical;
-        }
-
-        #{$mat-form-field} {
-            width: 100%;
-        }
     }
 
     .adf-comments-input-actions {
+        padding-top: 4px;
         display: flex;
         justify-content: flex-end;
     }
+
+    #{$mat-list-item-unscoped-content} {
+        display: flex;
+        padding: 0 16px;
+    }
 }