From 2c415e37e7282f0080083ce29027ef8d8d96fd90 Mon Sep 17 00:00:00 2001
From: Bruno Windels <bruno@windels.cloud>
Date: Wed, 15 Sep 2021 17:23:28 +0200
Subject: [PATCH] where ResizeObserver is support, restore anchored node on
 resize

---
 .../web/ui/session/room/TimelineView.ts       | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/platform/web/ui/session/room/TimelineView.ts b/src/platform/web/ui/session/room/TimelineView.ts
index 9bcfb333..9c12d8d4 100644
--- a/src/platform/web/ui/session/room/TimelineView.ts
+++ b/src/platform/web/ui/session/room/TimelineView.ts
@@ -69,6 +69,7 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
     private anchoredBottom: number = 0;
     private stickToBottom: boolean = true;
     private tilesView?: TilesListView;
+    private resizeObserver?: ResizeObserver;
 
     render(t: TemplateBuilder, vm: TimelineViewModel) {
         // assume this view will be mounted in the parent DOM straight away
@@ -77,9 +78,26 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
             this.restoreScrollPosition();
         });
         this.tilesView = new TilesListView(vm.tiles, () => this.restoreScrollPosition());
-        return t.div({className: "Timeline bottom-aligned-scroll", onScroll: () => this.onScroll()}, [
+        const root = t.div({className: "Timeline bottom-aligned-scroll", onScroll: () => this.onScroll()}, [
             t.view(this.tilesView)
         ]);
+
+        if (typeof ResizeObserver === "function") {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.restoreScrollPosition();
+            });
+            this.resizeObserver.observe(root);
+        }
+
+        return root;
+    }
+
+    public unmount() {
+        super.unmount();
+        if (this.resizeObserver) {
+            this.resizeObserver.unobserve(this.root());
+            this.resizeObserver = null;
+        }
     }
 
     private restoreScrollPosition() {