Fix styles issue with opinions textarea components (#488)

binary-coffee-dev · Aug 22, 2024 · 1ad5954 · 1ad5954
1 parent 4bd02cc
commit 1ad5954
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/apps/blog/src/app/features/post/comments/comments.component.scss b/apps/blog/src/app/features/post/comments/comments.component.scss
@@ -11,14 +11,19 @@
     }
 
     mat-form-field {
-      ::ng-deep.code-none {
+      height: auto;
 
-        .code-1 {
-          color: map-get($md-primary, 500);
-        }
+      textarea {
+        color: map-get($md-grey, 700);
+      }
 
-        .code-var {
-          color: map-get($md-grey, 600);
+      ::ng-deep.mat-mdc-text-field-wrapper {
+        .mat-mdc-form-field-flex {
+          height: auto;
+
+          label {
+            top: 15px;
+          }
         }
       }
     }

diff --git a/apps/blog/src/app/features/post/comments/comments.component.ts b/apps/blog/src/app/features/post/comments/comments.component.ts
@@ -96,7 +96,7 @@ export class CommentsComponent implements OnInit, OnDestroy {
   editComment(comment: Comment): void {
     this.dialog.open(EditCommentModalComponent, {
       width: '500px',
-      height: '600px',
+      height: '540px',
       maxHeight: '600px',
       data: {comment}
     });

diff --git a/.../blog/src/app/features/post/comments/edit-comment.modal/edit-comment.modal.component.html b/.../blog/src/app/features/post/comments/edit-comment.modal/edit-comment.modal.component.html
@@ -8,7 +8,7 @@
   </div>
   <div class='body flex flex-col'>
 
-    <form class='flex flex-col h-full mb-5'
+    <form class='flex flex-col h-full mb-10'
           [formGroup]='commentForm'>
 
       <span class='comment-error-message'

diff --git a/.../blog/src/app/features/post/comments/edit-comment.modal/edit-comment.modal.component.scss b/.../blog/src/app/features/post/comments/edit-comment.modal/edit-comment.modal.component.scss
@@ -14,8 +14,19 @@
 
     mat-form-field {
       width: 100%;
+      height: auto;
 
       ::ng-deep {
+        .mat-mdc-text-field-wrapper {
+          .mat-mdc-form-field-flex {
+            height: auto;
+
+            label {
+              top: 15px;
+            }
+          }
+        }
+
         textarea {
           height: 320px;
           max-height: 320px;