diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 7ded0d2e6a8564510143addf2ee31727c7b16f27..ea2e4385d534c5abe56637dcb572f65ae5b1867a 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -262,7 +262,7 @@
            role="button"
            style="width:100%;"
            tabindex="0">
-        <ars-row #commentBody>
+        <ars-row #commentBody class="commentBody">
           <ars-row #commentBodyInner>
             <app-view-comment-data class="images" [currentData]="comment.body"></app-view-comment-data>
           </ars-row>
@@ -306,17 +306,15 @@
         }}">{{comment.score}}</span>
       </div>
     </div>
-    <ars-row #commentExpander
-             ars-flex-box
-             [height]="37">
-      <ars-fill></ars-fill>
-      <ars-col>
-        <button mat-button
+    <ars-row ars-flex-box #commentExpander>
+      <ars-fill>
+        <button mat-button style="width:100%;"
                 (click)="toggleExpand($event)"><span class="commentExpanderButton">
-          {{ isExpanded ? ('comment-page.show-less' | translate) : ('comment-page.show-more' | translate) }}
-        </span></button>
+            {{ isExpanded ? ('comment-page.show-less' | translate) : ('comment-page.show-more' | translate) }}
+          </span></button>
+      </ars-fill>
+      <ars-col [width]="16">
       </ars-col>
-      <ars-fill></ars-fill>
     </ars-row>
     <div fxLayout="row"
          fxLayoutAlign="start center">
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index f885388491b9da9b53216c6d5b96c4340e74eafd..54210399d84560176417cd8e0bc512a02727d888 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -285,6 +285,10 @@ mat-card-content > :first-child {
   color: var(--on-surface);
 }
 
+.commentBody{
+  transition:height ease-in-out 0.2s;
+}
+
 @keyframes upVote {
   0% {
     transform: scale3d(1, 1, 1);
diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts
index b80a72ead71f51758d2d3b56d5b8f559d1f3c1ac..d5a2f2b06ad4e075277d8ca2c7c4ca648ce5c2ac 100644
--- a/src/app/components/shared/comment/comment.component.ts
+++ b/src/app/components/shared/comment/comment.component.ts
@@ -36,7 +36,7 @@ import { UserBonusTokenComponent } from '../../participant/_dialogs/user-bonus-t
 
 export class CommentComponent implements OnInit, AfterViewInit {
 
-  static COMMENT_MAX_HEIGHT = 200;
+  static COMMENT_MAX_HEIGHT = 150;
 
   @Input() comment: Comment;
   @Input() moderator: boolean;
@@ -121,13 +121,15 @@ export class CommentComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.isExpandable = this.commentBody.getRenderedHeight() > CommentComponent.COMMENT_MAX_HEIGHT;
-    if (!this.isExpandable) {
-      this.commentExpander.ref.nativeElement.style.display = 'none';
-    } else {
-      this.commentBody.setPx(CommentComponent.COMMENT_MAX_HEIGHT);
-      this.commentBody.setOverflow('hidden');
-    }
+    setTimeout(()=>{
+      this.isExpandable = this.commentBody.getRenderedHeight() > CommentComponent.COMMENT_MAX_HEIGHT;
+      if (!this.isExpandable) {
+        this.commentExpander.ref.nativeElement.style.display = 'none';
+      } else {
+        this.commentBody.setPx(CommentComponent.COMMENT_MAX_HEIGHT);
+        this.commentBody.setOverflow('hidden');
+      }
+    });
   }
 
   sortKeywords(keywords: SpacyKeyword[]) {