powergrid-viewer 2.1.1 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "powergrid-viewer",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/boardgamers/powergrid.git",

package/src/components/InlineLog.vue

@@ -32,6 +32,7 @@ export default class InlineLog extends Vue {
     @Prop({ default: () => [] }) entries!: string[];
     @Prop({ default: '' }) mapName!: string;
     follow = true;
+    private feedObserver?: ResizeObserver;
     get illustratedEntries() {
         return this.entries.map((entry) => {
             const parts: { html?: string; plant?: PowerPlant }[] = [];
@@ -54,8 +55,15 @@ export default class InlineLog extends Vue {
         } cities`;
     }
     mounted() {
+        this.feedObserver = new ResizeObserver(() => {
+            if (this.follow) this.scrollToLatest();
+        });
+        this.feedObserver.observe(this.$refs.feed as HTMLElement);
         this.scrollToLatest();
     }
+    beforeDestroy() {
+        this.feedObserver?.disconnect();
+    }
     @Watch('entries') changed() {
         if (this.follow) {
             this.$nextTick(this.scrollToLatest);
@@ -63,13 +71,13 @@ export default class InlineLog extends Vue {
     }
     scrollToLatest() {
         const feed = this.$refs.feed as HTMLElement;
-        if (feed) {
+        if (feed?.clientHeight) {
             feed.scrollTop = feed.scrollHeight;
         }
     }
     onScroll() {
         const feed = this.$refs.feed as HTMLElement;
-        this.follow = feed.scrollHeight - feed.scrollTop - feed.clientHeight < 32;
+        if (feed.clientHeight) this.follow = feed.scrollHeight - feed.scrollTop - feed.clientHeight < 32;
     }
 }
 </script>

package/src/game-chat.ts

@@ -301,7 +301,7 @@ export function mountGameChat(emitter: ChatEmitter, host: Element): void {
         }
     };
     list.onscroll = () => {
-        following = list.scrollHeight - list.scrollTop - list.clientHeight < 32;
+        if (list.clientHeight) following = list.scrollHeight - list.scrollTop - list.clientHeight < 32;
         read();
     };
     panel.ontoggle = () => {
@@ -314,10 +314,12 @@ export function mountGameChat(emitter: ChatEmitter, host: Element): void {
     window.addEventListener('focus', read);
     window.addEventListener('resize', read);
     const sizing = new ResizeObserver(() => {
+        if (following && list.clientHeight) list.scrollTop = list.scrollHeight;
         updateShortcut();
         read();
     });
     sizing.observe(panel);
+    sizing.observe(list);
     document.addEventListener('visibilitychange', read);
     status.textContent = reason;
     controls();