(fix): comments overflowing when fixed height

src/app/modules/comments/entity-outlet/entity-outlet.component.ts

@@ -47,7 +47,8 @@ export class CommentsEntityOutletComponent implements OnInit, OnDestroy {
   @Input() limit: number = 12;
   @Input() canEdit: boolean = false;
   @Input() canDelete: boolean = false;
-  showOnlyPoster: boolean = true;
+  @Input() fixedHeight = false;
+  @Input() showOnlyPoster = true;
   optimisticList: Array<any> = [];
 
   // private shouldReuseRouteFn;
@@ -57,7 +58,7 @@ export class CommentsEntityOutletComponent implements OnInit, OnDestroy {
     public client: Client,
     public attachment: AttachmentService,
     public sockets: SocketsService,
-    private renderer: Renderer,
+    private router: Router,
     private cd: ChangeDetectorRef,
     public legacyActivityService: ActivityServiceCommentsLegacySupport
   ) {}
@@ -90,19 +91,35 @@ export class CommentsEntityOutletComponent implements OnInit, OnDestroy {
   }
 
   onPosted({ comment, index }): void {
+    if (this.fixedHeight) {
+      this.redirectToSinglePage();
+    }
     this.optimisticList[index] = comment;
     this.detectChanges();
   }
 
   onOptimisticPost(comment): void {
+    if (this.fixedHeight) return;
     this.optimisticList.push(comment);
   }
 
   openFullComments(): void {
+    if (this.fixedHeight) {
+      // redirect to full view newsfeed post
+      this.redirectToSinglePage();
+    }
     this.showOnlyPoster = false;
     this.detectChanges();
   }
 
+  redirectToSinglePage(): void {
+    this.router.navigate([`/newsfeed/${this.entity.guid}`], {
+      queryParams: {
+        fixedHeight: 0,
+      },
+    });
+  }
+
   detectChanges(): void {
     this.cd.markForCheck();
     this.cd.detectChanges();

src/app/modules/newsfeed/activity/activity.component.html

@@ -20,6 +20,8 @@
   <m-comments__entityOutlet
     [entity]="service.entity$ | async"
     [canDelete]="service.canDelete$ | async"
+    [showOnlyPoster]="service.displayOptions.showOnlyCommentsInput"
+    [fixedHeight]="service.displayOptions.fixedHeight"
   >
   </m-comments__entityOutlet>
 </ng-container>

src/app/modules/newsfeed/activity/content/content.component.ts

@@ -111,7 +111,15 @@ export class ActivityContentComponent {
     const messageHeight = this.messageEl
       ? this.messageEl.nativeElement.clientHeight
       : 0;
-    this.remindHeight = this.maxFixedHeightContent - messageHeight;
+
+    let maxFixedHeightContent = this.maxFixedHeightContent;
+
+    // Need to allow extra space for comments entry
+    if (this.entity['comments:count'] > 0) {
+      maxFixedHeightContent = maxFixedHeightContent - 42;
+    }
+
+    this.remindHeight = maxFixedHeightContent - messageHeight;
     this.remindWidth = this.remindHeight * this.fixedHeightRatio;
   }
 

src/app/modules/newsfeed/single/single.component.html

@@ -48,7 +48,10 @@
     <div class="minds-list" *ngIf="activity && !showLegacyActivity">
       <m-activity
         [entity]="activity"
-        [displayOptions]="{ fixedHeight: fixedHeight }"
+        [displayOptions]="{
+          fixedHeight: fixedHeight,
+          showOnlyCommentsInput: fixedHeight
+        }"
       ></m-activity>
     </div>
   </div>

src/app/modules/newsfeed/single/single.component.ts

@@ -73,7 +73,7 @@ export class NewsfeedSingleComponent {
           this.editing = !!params.get('editing');
         }
         if (params.has('fixedHeight')) {
-          this.fixedHeight = !!params.get('fixedHeight');
+          this.fixedHeight = params.get('fixedHeight') === '1';
         }
       }
     );