From 88004ca6abb51d584183e7e7e1e4642fec922330 Mon Sep 17 00:00:00 2001
From: Bas <b.huis@shadowcat.co.uk>
Date: Thu, 13 Feb 2025 14:15:32 +0000
Subject: [PATCH] Have messages underneath mail viewer and on scroll down or on
 window resize

---
 .../accessible-table.component.html           |  2 +-
 .../accessible-table.component.ts             | 26 +++++++++++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/app/accessible-table/accessible-table.component.html b/src/app/accessible-table/accessible-table.component.html
index 148e6d4c..41d19dce 100644
--- a/src/app/accessible-table/accessible-table.component.html
+++ b/src/app/accessible-table/accessible-table.component.html
@@ -1,4 +1,4 @@
-<cdk-virtual-scroll-viewport [itemSize]="firstRowHeight" class="email-viewport">
+<cdk-virtual-scroll-viewport [maxBufferPx]="maxBufferPx" [minBufferPx]="maxBufferPx / 2" [itemSize]="firstRowHeight" class="email-viewport">
   <table
     tabindex="0" role="group" aria-label="Messages"
     class="mat-mdc-table mdc-data-table__table cdk-table mat-sort mat-elevation-z8"
diff --git a/src/app/accessible-table/accessible-table.component.ts b/src/app/accessible-table/accessible-table.component.ts
index 0de0c8ef..66118f4a 100644
--- a/src/app/accessible-table/accessible-table.component.ts
+++ b/src/app/accessible-table/accessible-table.component.ts
@@ -59,8 +59,10 @@ export class AccessibleTableComponent implements OnDestroy, AfterViewInit, OnCha
   @Input() scrollToIndex: null | number = null
 
   firstRowHeight: number = 100;
+  maxBufferPx: number;
 
   private renderedRangeSub!: Subscription;
+  private resizeObserver: ResizeObserver;
 
   constructor(
     private elementRef: ElementRef,
@@ -68,23 +70,29 @@ export class AccessibleTableComponent implements OnDestroy, AfterViewInit, OnCha
 
   ngAfterViewInit() {
     this.renderedRangeSub = this.viewport.renderedRangeStream
-      .pipe(debounceTime(500))
+      .pipe(debounceTime(50))
       .subscribe(range => {
         this.renderedRangeChange.emit(range)
       });
 
-      setTimeout(() => {
-        this.updateFirstRowHeight();
-      }, 1000)
+    setTimeout(() => {
+      this.updateFirstRowHeight()
+    }, 1000)
+
+    this.resizeObserver = new ResizeObserver((entries) => {
+      this.maxBufferPx = window.innerHeight
+      this.updateFirstRowHeight()
+    });
+
+    this.resizeObserver.observe(this.elementRef.nativeElement.parentElement.querySelector('table'));
   }
 
   ngOnDestroy(): void {
-    this.renderedRangeSub?.unsubscribe();
+    this.renderedRangeSub.unsubscribe();
+    this.resizeObserver.disconnect();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    this.updateFirstRowHeight()
-
     if (changes.scrollToIndex && this.items.length > this.scrollToIndex) {
       this.doScrollToIndex(this.scrollToIndex)
     }
@@ -99,11 +107,13 @@ export class AccessibleTableComponent implements OnDestroy, AfterViewInit, OnCha
   }
 
   private updateFirstRowHeight(): void {
-    this.firstRowHeight = this
+    const elem = this
       .elementRef
       .nativeElement
       .parentElement
         ?.querySelector('tbody')
+
+    this.firstRowHeight = elem
         ?.offsetHeight
         || this.firstRowHeight;
   }