From 43414399d727a70c4fd14676dad9fe1a8dc692bf Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sun, 10 May 2026 18:32:55 +0100
Subject: [PATCH 1/4] fix: console text selection

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 components.d.ts                               |   1 +
 package-lock.json                             |  36 -----
 package.json                                  |   1 -
 src/components/ui/AppScrollableContainer.vue  |  89 ++++++++++++
 src/components/widgets/console/Console.vue    | 129 +++---------------
 .../widgets/console/ConsoleCard.vue           |  26 +---
 .../widgets/console/ConsoleItem.vue           |  47 ++++---
 src/main.ts                                   |   3 -
 src/typings/vue-virtual-scroller.d.ts         |  12 --
 9 files changed, 141 insertions(+), 203 deletions(-)
 create mode 100644 src/components/ui/AppScrollableContainer.vue
 delete mode 100644 src/typings/vue-virtual-scroller.d.ts

diff --git a/components.d.ts b/components.d.ts
index a6c01dee7c..213231ef3c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -47,6 +47,7 @@ declare module 'vue' {
     AppObservedColumn: typeof import('./src/components/layout/AppObservedColumn.vue')['default']
     AppQrCode: typeof import('./src/components/ui/AppQrCode.vue')['default']
     AppSaveConfigAndRestartBtn: typeof import('./src/components/layout/AppSaveConfigAndRestartBtn.vue')['default']
+    AppScrollableContainer: typeof import('./src/components/ui/AppScrollableContainer.vue')['default']
     AppSetting: typeof import('./src/components/ui/AppSetting.vue')['default']
     AppSettingsNav: typeof import('./src/components/layout/AppSettingsNav.vue')['default']
     AppTextField: typeof import('./src/components/ui/AppTextField.vue')['default']
diff --git a/package-lock.json b/package-lock.json
index a2fb8ca84c..45804e5c7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,6 @@
         "vue-meta": "^2.4.0",
         "vue-property-decorator": "^9.1.2",
         "vue-router": "^3.6.5",
-        "vue-virtual-scroller": "^1.1.2",
         "vue2-touch-events": "^3.2.3",
         "vuetify": "^2.7.2",
         "vuetify-confirm": "^2.0.6",
@@ -14353,12 +14352,6 @@
         "node": ">=v12.22.7"
       }
     },
-    "node_modules/scrollparent": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
-      "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA==",
-      "license": "ISC"
-    },
     "node_modules/scslre": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/scslre/-/scslre-0.3.0.tgz",
@@ -16836,12 +16829,6 @@
         "deepmerge": "^4.2.2"
       }
     },
-    "node_modules/vue-observe-visibility": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
-      "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==",
-      "license": "MIT"
-    },
     "node_modules/vue-property-decorator": {
       "version": "9.1.2",
       "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
@@ -16852,15 +16839,6 @@
         "vue-class-component": "*"
       }
     },
-    "node_modules/vue-resize": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
-      "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "vue": "^2.3.0"
-      }
-    },
     "node_modules/vue-router": {
       "version": "3.6.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
@@ -16895,20 +16873,6 @@
         "typescript": ">=5.0.0"
       }
     },
-    "node_modules/vue-virtual-scroller": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-1.1.2.tgz",
-      "integrity": "sha512-SkUyc7QHCJFB5h1Fya7LxVizlVzOZZuFVipBGHYoTK8dwLs08bIz/tclvRApYhksaJIm/nn51inzO2UjpGJPMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "scrollparent": "^2.0.1",
-        "vue-observe-visibility": "^0.4.4",
-        "vue-resize": "^0.4.5"
-      },
-      "peerDependencies": {
-        "vue": "^2.6.11"
-      }
-    },
     "node_modules/vue/node_modules/@vue/compiler-sfc": {
       "version": "2.7.16",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
diff --git a/package.json b/package.json
index 5297c2dc2c..545e0f7263 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,6 @@
     "vue-meta": "^2.4.0",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.6.5",
-    "vue-virtual-scroller": "^1.1.2",
     "vue2-touch-events": "^3.2.3",
     "vuetify": "^2.7.2",
     "vuetify-confirm": "^2.0.6",
diff --git a/src/components/ui/AppScrollableContainer.vue b/src/components/ui/AppScrollableContainer.vue
new file mode 100644
index 0000000000..63cc3dc1e5
--- /dev/null
+++ b/src/components/ui/AppScrollableContainer.vue
@@ -0,0 +1,89 @@
+<template>
+  <div
+    ref="box"
+    class="app-scrollable-container"
+    @scroll="onScroll"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Ref, Vue, Watch } from 'vue-property-decorator'
+
+@Component
+export default class AppScrollableContainer extends Vue {
+  @Prop({ type: Boolean })
+  readonly reversed?: boolean
+
+  @Ref('box')
+  readonly box!: HTMLElement
+
+  scrollingAwayFromLatest = false
+
+  @Watch('reversed')
+  onReversed () {
+    this.scrollToLatest(true)
+  }
+
+  @Watch('scrollingAwayFromLatest')
+  onScrollingAwayFromLatest (value: boolean) {
+    this.$emit('update:scrolling-away-from-latest', value)
+  }
+
+  mounted () {
+    this.$nextTick(() => {
+      this.scrollToLatest()
+    })
+  }
+
+  updated () {
+    this.$nextTick(() => {
+      this.scrollToLatest()
+    })
+  }
+
+  onScroll () {
+    this.scrollingAwayFromLatest = (
+      this.reversed
+        ? this.getScrollTop()
+        : this.getScrollBottom()
+    ) > 1
+  }
+
+  scrollToLatest (force?: boolean) {
+    if (
+      !force &&
+      this.scrollingAwayFromLatest
+    ) {
+      return
+    }
+
+    this.setScrollTop(
+      this.reversed
+        ? 0
+        : this.box.scrollHeight
+    )
+  }
+
+  getScrollTop () {
+    return this.box.scrollTop
+  }
+
+  setScrollTop (value: number) {
+    this.box.scrollTop = value
+  }
+
+  getScrollBottom () {
+    const { scrollTop, scrollHeight, clientHeight } = this.box
+
+    return scrollHeight - clientHeight - scrollTop
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .app-scrollable-container {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+</style>
diff --git a/src/components/widgets/console/Console.vue b/src/components/widgets/console/Console.vue
index c0d6dac893..d916727842 100644
--- a/src/components/widgets/console/Console.vue
+++ b/src/components/widgets/console/Console.vue
@@ -8,40 +8,26 @@
       @send="sendCommand"
     />
     <v-card
-      ref="console-wrapper"
       flat
       class="console-wrapper"
     >
-      <DynamicScroller
-        ref="scroller"
-        :items="flipLayout ? [...items].reverse() : items"
-        :min-item-size="24"
+      <app-scrollable-container
+        ref="consoleScroller"
         class="console-scroller"
         :class="{
           'console-scroller-fullscreen': fullscreen
         }"
-        key-field="id"
-        :buffer="600"
-        @resize="scrollToLatest()"
+        :reversed="flipLayout"
+        @update:scrolling-away-from-latest="scrollingPausedModel = $event"
       >
-        <template #default="{ item, index, active }">
-          <DynamicScrollerItem
-            :item="item"
-            :active="active"
-            :size-dependencies="[
-              item.message,
-            ]"
-            :data-index="index"
-          >
-            <console-item
-              :key="item.id"
-              :value="item"
-              class="console-item"
-              @click="handleEntryClick"
-            />
-          </DynamicScrollerItem>
-        </template>
-      </DynamicScroller>
+        <console-item
+          v-for="item in flipLayout ? [...items].reverse() : items"
+          :key="item.id"
+          :value="item"
+          class="console-item"
+          @click="handleEntryClick"
+        />
+      </app-scrollable-container>
     </v-card>
     <console-command
       v-if="!readonly && !flipLayout"
@@ -54,14 +40,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Mixins, Watch, Ref, PropSync } from 'vue-property-decorator'
+import { Component, Prop, Mixins, Ref, PropSync } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import ConsoleCommand from './ConsoleCommand.vue'
 import ConsoleItem from './ConsoleItem.vue'
 import { SocketActions } from '@/api/socketActions'
-import type { DinamicScroller } from 'vue-virtual-scroller'
 import type { ConsoleEntry } from '@/store/console/types'
 import type { UpdateResponse } from '@/store/version/types'
+import type AppScrollableContainer from '@/components/ui/AppScrollableContainer.vue'
 
 @Component({
   components: {
@@ -70,7 +56,7 @@ import type { UpdateResponse } from '@/store/version/types'
   }
 })
 export default class Console extends Mixins(StateMixin) {
-  @Prop({ type: [Array<ConsoleEntry>, Array<UpdateResponse>], default: () => [] })
+  @Prop({ type: [Array], default: () => [] })
   readonly items!: ConsoleEntry[] | UpdateResponse[]
 
   @Prop({ type: Boolean })
@@ -82,10 +68,8 @@ export default class Console extends Mixins(StateMixin) {
   @PropSync('scrollingPaused', { type: Boolean })
   scrollingPausedModel?: boolean
 
-  @Ref('scroller')
-  readonly dynamicScroller!: DinamicScroller
-
-  _pauseScroll = false
+  @Ref('consoleScroller')
+  readonly consoleScrollerElement!: AppScrollableContainer
 
   get currentCommand (): string {
     return this.$typedState.console.consoleCommand
@@ -99,79 +83,12 @@ export default class Console extends Mixins(StateMixin) {
     return this.$typedState.config.uiSettings.general.flipConsoleLayout
   }
 
-  set flipLayout (_) {
-    this.scrollToLatest(true)
-  }
-
-  mounted () {
-    this.dynamicScroller.$el.addEventListener('scroll', this.onScroll)
-  }
-
-  beforeDestroy () {
-    this.dynamicScroller.$el.removeEventListener('scroll', this.onScroll)
-  }
-
-  @Watch('items', { immediate: true })
-  onItemsChange (_: unknown, oldItems: unknown[]) {
-    if (this.dynamicScroller) {
-      const el = this.dynamicScroller.$el
-
-      if (this.flipLayout && (this._pauseScroll || !this.$typedState.console.autoScroll)) {
-        const { scrollHeight, clientHeight } = el
-
-        if (scrollHeight > clientHeight) {
-          this.$nextTick(() => {
-            el.scrollTop += el.scrollHeight - scrollHeight
-          })
-        }
-      } else {
-        this.scrollToLatest(oldItems?.length === 0)
-      }
-    }
-  }
-
-  updateScrollingPaused () {
-    this.$nextTick(() => {
-      const { scrollTop, scrollHeight, clientHeight } = this.dynamicScroller.$el
-
-      const pauseScroll = this.flipLayout ? scrollTop > 1 : scrollHeight - scrollTop - clientHeight > 1
-
-      if (this._pauseScroll !== pauseScroll) {
-        this._pauseScroll = pauseScroll
-        this.scrollingPausedModel = pauseScroll
-      }
-    })
-  }
-
-  onScroll () {
-    this.updateScrollingPaused()
-  }
-
-  scrollToLatest (force?: boolean) {
-    if (this._pauseScroll && !force) return
-
-    if (this.dynamicScroller) {
-      if (
-        this.$typedState.console.autoScroll ||
-        this.readonly ||
-        force
-      ) {
-        if (this.flipLayout) {
-          this.dynamicScroller.scrollToItem(0)
-        } else {
-          this.dynamicScroller.scrollToBottom()
-        }
-      }
-
-      if (force) {
-        // The fixed/floating nature of the console may only change if the scroll is forced.
-        this.updateScrollingPaused()
-      }
-    }
+  scrollToLatest () {
+    this.consoleScrollerElement.scrollToLatest(true)
   }
 
   sendCommand (command?: string) {
-    if (command && command.length) {
+    if (command) {
       // If clients detect M112 input from the console, we should invoke the emergency_stop endpoint
       if (command.trim().toLowerCase() === 'm112') {
         SocketActions.printerEmergencyStop()
@@ -202,6 +119,7 @@ export default class Console extends Mixins(StateMixin) {
   .console-scroller {
     height: 300px;
   }
+
   .console-scroller-fullscreen {
     height: calc(100vh - 260px);
     height: calc(100svh - 260px);
@@ -210,9 +128,4 @@ export default class Console extends Mixins(StateMixin) {
   .v-input {
     flex: 0 0 auto;
   }
-
-  :deep(.vue-recycle-scroller__item-wrapper) {
-    overflow: revert;
-  }
-
 </style>
diff --git a/src/components/widgets/console/ConsoleCard.vue b/src/components/widgets/console/ConsoleCard.vue
index 105204b174..f72bb9041a 100644
--- a/src/components/widgets/console/ConsoleCard.vue
+++ b/src/components/widgets/console/ConsoleCard.vue
@@ -16,7 +16,7 @@
       <app-btn
         v-if="scrollingPaused"
         icon
-        @click="consoleElement.scrollToLatest(true)"
+        @click="consoleElement.scrollToLatest()"
       >
         <v-icon dense>
           {{ flipLayout ? '$up' : '$down' }}
@@ -73,17 +73,6 @@
             </v-list-item-content>
           </v-list-item>
 
-          <v-list-item @click="autoScroll = !autoScroll">
-            <v-list-item-action class="my-0">
-              <v-checkbox :input-value="autoScroll" />
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ $t('app.console.label.auto_scroll') }}
-              </v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-
           <v-list-item @click="flipLayout = !flipLayout">
             <v-list-item-action class="my-0">
               <v-checkbox :input-value="flipLayout" />
@@ -171,8 +160,6 @@ export default class ConsoleCard extends Vue {
       value,
       server: true
     })
-
-    this.consoleElement.flipLayout = value
   }
 
   get items (): ConsoleEntry[] {
@@ -183,17 +170,6 @@ export default class ConsoleCard extends Vue {
     return (this.$typedState.config.layoutMode)
   }
 
-  get autoScroll (): boolean {
-    return this.$typedState.console.autoScroll
-  }
-
-  set autoScroll (value: boolean) {
-    this.$typedDispatch('console/onUpdateAutoScroll', value)
-    if (value) {
-      this.consoleElement.scrollToLatest(true)
-    }
-  }
-
   @Watch('inLayout')
   inLayoutChange (inLayout: boolean) {
     if (!inLayout) {
diff --git a/src/components/widgets/console/ConsoleItem.vue b/src/components/widgets/console/ConsoleItem.vue
index 2d80d25bec..fe391ea67c 100644
--- a/src/components/widgets/console/ConsoleItem.vue
+++ b/src/components/widgets/console/ConsoleItem.vue
@@ -1,7 +1,7 @@
 <template>
   <v-layout class="console-item">
     <span
-      v-if="value.time"
+      v-if="itemTime"
       class="secondary--text mr-3 d-none d-sm-block text-no-wrap"
     >
       {{ itemTime }}&nbsp;
@@ -18,31 +18,43 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Globals } from '@/globals'
 import type { ConsoleEntry } from '@/store/console/types'
+import type { UpdateResponse } from '@/store/version/types'
 
 @Component({})
 export default class ConsoleItem extends Vue {
-  @Prop({ type: Object, default: () => {} })
-  readonly value!: ConsoleEntry
+  @Prop({ type: Object, required: true })
+  readonly value!: ConsoleEntry | UpdateResponse
 
   get knownCommands (): Moonraker.KlippyApis.GcodeHelpResponse {
     return this.$typedGetters['console/getAllKnownCommands']
   }
 
   get itemMessage () {
-    let message = this.value.message
-    if (this.value.type === 'response') {
-      message = this.value.message.replace(/([A-Z_][A-Z0-9_.]+)/g, (match, command) => {
-        if (command in this.knownCommands) return `<a class="primary--text text--lighten-1">${command.toUpperCase()}</a>`
-        return match
-      })
+    const message = this.value.message
+
+    if ('type' in this.value) {
+      switch (this.value.type) {
+        case 'command':
+          return `${Globals.CONSOLE_SEND_PREFIX}<a class="primary--text text--lighten-1">${message}</a>`
+
+        case 'response':
+          return message
+            .replace(/([A-Z_][A-Z0-9_.]+)/g, (match, command) => (
+              command in this.knownCommands
+                ? `<a class="primary--text text--lighten-1">${command.toUpperCase()}</a>`
+                : match
+            ))
+      }
     }
-    return (this.value.type === 'command')
-      ? `${Globals.CONSOLE_SEND_PREFIX}<a class="primary--text text--lighten-1">${message}</a>`
-      : message
+
+    return message
   }
 
   get itemTime () {
-    return (this.value.time)
+    return (
+      'time' in this.value &&
+      this.value.time
+    )
       ? this.$filters.formatTimeWithSeconds(this.value.time * 1000)
       : ''
   }
@@ -52,11 +64,10 @@ export default class ConsoleItem extends Vue {
       return { 'error--text': true }
     }
 
-    // if (this.value.message.startsWith('//')) {
-    //   return { 'secondary--text': true }
-    // }
-
-    if (this.value.type === 'command') {
+    if (
+      'type' in this.value &&
+      this.value.type === 'command'
+    ) {
       return { 'primary--text': true }
     }
 
diff --git a/src/main.ts b/src/main.ts
index 084d21675a..42a1c4c011 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,5 @@
 // Styles
 import '@/scss/global.scss'
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 // Global Registrations
 import './registerComponentHooks'
@@ -14,7 +13,6 @@ import store from './store'
 
 // 3rd party.
 import vuetify from './plugins/vuetify'
-import VueVirtualScroller from 'vue-virtual-scroller'
 import VueMeta from 'vue-meta'
 import VuetifyConfirm from 'vuetify-confirm'
 import Vue2TouchEvents from 'vue2-touch-events'
@@ -41,7 +39,6 @@ Vue.directive('safe-html', SafeHtml)
 Vue.component('EChart', () => import('./vue-echarts-chunk'))
 
 // Use any Plugins
-Vue.use(VueVirtualScroller)
 Vue.use(FiltersPlugin)
 Vue.use(VueMeta)
 Vue.use(ColorSetPlugin, {})
diff --git a/src/typings/vue-virtual-scroller.d.ts b/src/typings/vue-virtual-scroller.d.ts
deleted file mode 100644
index 60abee794a..0000000000
--- a/src/typings/vue-virtual-scroller.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-declare module 'vue-virtual-scroller' {
-  import Vue, { PluginObject } from 'vue'
-
-  declare const VueVirtualScroller: PluginObject<any>
-
-  export interface DinamicScroller extends Vue {
-    scrollToItem: (index: number) => void,
-    scrollToBottom: () => void
-  }
-
-  export default VueVirtualScroller
-}

From d5f535f09c918b6a6f1e4a05f9d8bfeb9033e61f Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sun, 10 May 2026 19:01:35 +0100
Subject: [PATCH 2/4] refactor: follow up on PR comments

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/ui/AppScrollableContainer.vue | 21 ++++++++++----------
 src/components/widgets/console/Console.vue   |  8 +++++++-
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/ui/AppScrollableContainer.vue b/src/components/ui/AppScrollableContainer.vue
index 63cc3dc1e5..6407ab8170 100644
--- a/src/components/ui/AppScrollableContainer.vue
+++ b/src/components/ui/AppScrollableContainer.vue
@@ -32,15 +32,11 @@ export default class AppScrollableContainer extends Vue {
   }
 
   mounted () {
-    this.$nextTick(() => {
-      this.scrollToLatest()
-    })
+    this.scrollToLatest()
   }
 
   updated () {
-    this.$nextTick(() => {
-      this.scrollToLatest()
-    })
+    this.scrollToLatest()
   }
 
   onScroll () {
@@ -59,11 +55,14 @@ export default class AppScrollableContainer extends Vue {
       return
     }
 
-    this.setScrollTop(
-      this.reversed
-        ? 0
-        : this.box.scrollHeight
-    )
+    this.$nextTick(() => {
+      this.setScrollTop(
+        this.reversed
+          ? 0
+          : this.box.scrollHeight
+      )
+      this.scrollingAwayFromLatest = false
+    })
   }
 
   getScrollTop () {
diff --git a/src/components/widgets/console/Console.vue b/src/components/widgets/console/Console.vue
index d916727842..dce317867a 100644
--- a/src/components/widgets/console/Console.vue
+++ b/src/components/widgets/console/Console.vue
@@ -21,7 +21,7 @@
         @update:scrolling-away-from-latest="scrollingPausedModel = $event"
       >
         <console-item
-          v-for="item in flipLayout ? [...items].reverse() : items"
+          v-for="item in orderedItems"
           :key="item.id"
           :value="item"
           class="console-item"
@@ -83,6 +83,12 @@ export default class Console extends Mixins(StateMixin) {
     return this.$typedState.config.uiSettings.general.flipConsoleLayout
   }
 
+  get orderedItems () {
+    return this.flipLayout
+      ? [...this.items].reverse()
+      : this.items
+  }
+
   scrollToLatest () {
     this.consoleScrollerElement.scrollToLatest(true)
   }

From 7add24317fc6395e6876e03f4b2ad8309bd00e0c Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sun, 10 May 2026 20:57:15 +0100
Subject: [PATCH 3/4] refactor: generic improvements

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 components.d.ts                               |  2 +-
 ...ntainer.vue => AppAutoScrollContainer.vue} | 38 +++++++++++--------
 src/components/widgets/console/Console.vue    | 15 +++-----
 .../widgets/console/ConsoleCard.vue           |  6 +--
 4 files changed, 33 insertions(+), 28 deletions(-)
 rename src/components/ui/{AppScrollableContainer.vue => AppAutoScrollContainer.vue} (57%)

diff --git a/components.d.ts b/components.d.ts
index 213231ef3c..18415dab4b 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -14,6 +14,7 @@ declare module 'vue' {
     ActionCommandPromptDialog: typeof import('./src/components/common/ActionCommandPromptDialog.vue')['default']
     AddInstanceDialog: typeof import('./src/components/common/AddInstanceDialog.vue')['default']
     AppAnnouncementDismissMenu: typeof import('./src/components/layout/AppAnnouncementDismissMenu.vue')['default']
+    AppAutoScrollContainer: typeof import('./src/components/ui/AppAutoScrollContainer.vue')['default']
     AppBar: typeof import('./src/components/layout/AppBar.vue')['default']
     AppBtn: typeof import('./src/components/ui/AppBtn.vue')['default']
     AppBtnCollapse: typeof import('./src/components/ui/AppBtnCollapse.vue')['default']
@@ -47,7 +48,6 @@ declare module 'vue' {
     AppObservedColumn: typeof import('./src/components/layout/AppObservedColumn.vue')['default']
     AppQrCode: typeof import('./src/components/ui/AppQrCode.vue')['default']
     AppSaveConfigAndRestartBtn: typeof import('./src/components/layout/AppSaveConfigAndRestartBtn.vue')['default']
-    AppScrollableContainer: typeof import('./src/components/ui/AppScrollableContainer.vue')['default']
     AppSetting: typeof import('./src/components/ui/AppSetting.vue')['default']
     AppSettingsNav: typeof import('./src/components/layout/AppSettingsNav.vue')['default']
     AppTextField: typeof import('./src/components/ui/AppTextField.vue')['default']
diff --git a/src/components/ui/AppScrollableContainer.vue b/src/components/ui/AppAutoScrollContainer.vue
similarity index 57%
rename from src/components/ui/AppScrollableContainer.vue
rename to src/components/ui/AppAutoScrollContainer.vue
index 6407ab8170..3a605ada36 100644
--- a/src/components/ui/AppScrollableContainer.vue
+++ b/src/components/ui/AppAutoScrollContainer.vue
@@ -1,8 +1,8 @@
 <template>
   <div
     ref="box"
-    class="app-scrollable-container"
-    @scroll="onScroll"
+    class="app-auto-scroll-container"
+    @scroll="updateAutoScrollPaused"
   >
     <slot />
   </div>
@@ -10,37 +10,45 @@
 
 <script lang="ts">
 import { Component, Prop, Ref, Vue, Watch } from 'vue-property-decorator'
+import { markRaw } from 'vue'
 
 @Component
-export default class AppScrollableContainer extends Vue {
+export default class AppAutoScrollContainer extends Vue {
   @Prop({ type: Boolean })
   readonly reversed?: boolean
 
   @Ref('box')
   readonly box!: HTMLElement
 
-  scrollingAwayFromLatest = false
+  autoScrollPaused = false
+  resizeObserver?: ResizeObserver
 
   @Watch('reversed')
   onReversed () {
     this.scrollToLatest(true)
   }
 
-  @Watch('scrollingAwayFromLatest')
-  onScrollingAwayFromLatest (value: boolean) {
-    this.$emit('update:scrolling-away-from-latest', value)
+  @Watch('autoScrollPaused')
+  onAutoScrollPaused (value: boolean) {
+    this.$emit('update:auto-scroll-paused', value)
   }
 
   mounted () {
     this.scrollToLatest()
+    this.resizeObserver = markRaw(new ResizeObserver(() => this.updateAutoScrollPaused()))
+    this.resizeObserver.observe(this.box)
   }
 
   updated () {
     this.scrollToLatest()
   }
 
-  onScroll () {
-    this.scrollingAwayFromLatest = (
+  beforeDestroy () {
+    this.resizeObserver?.disconnect()
+  }
+
+  private updateAutoScrollPaused () {
+    this.autoScrollPaused = (
       this.reversed
         ? this.getScrollTop()
         : this.getScrollBottom()
@@ -50,7 +58,7 @@ export default class AppScrollableContainer extends Vue {
   scrollToLatest (force?: boolean) {
     if (
       !force &&
-      this.scrollingAwayFromLatest
+      this.autoScrollPaused
     ) {
       return
     }
@@ -61,19 +69,19 @@ export default class AppScrollableContainer extends Vue {
           ? 0
           : this.box.scrollHeight
       )
-      this.scrollingAwayFromLatest = false
+      this.autoScrollPaused = false
     })
   }
 
-  getScrollTop () {
+  private getScrollTop () {
     return this.box.scrollTop
   }
 
-  setScrollTop (value: number) {
+  private setScrollTop (value: number) {
     this.box.scrollTop = value
   }
 
-  getScrollBottom () {
+  private getScrollBottom () {
     const { scrollTop, scrollHeight, clientHeight } = this.box
 
     return scrollHeight - clientHeight - scrollTop
@@ -81,7 +89,7 @@ export default class AppScrollableContainer extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-  .app-scrollable-container {
+  .app-auto-scroll-container {
     overflow-y: auto;
     overflow-x: hidden;
   }
diff --git a/src/components/widgets/console/Console.vue b/src/components/widgets/console/Console.vue
index dce317867a..47e8cfe103 100644
--- a/src/components/widgets/console/Console.vue
+++ b/src/components/widgets/console/Console.vue
@@ -11,14 +11,14 @@
       flat
       class="console-wrapper"
     >
-      <app-scrollable-container
+      <app-auto-scroll-container
         ref="consoleScroller"
         class="console-scroller"
         :class="{
           'console-scroller-fullscreen': fullscreen
         }"
         :reversed="flipLayout"
-        @update:scrolling-away-from-latest="scrollingPausedModel = $event"
+        v-on="$listeners"
       >
         <console-item
           v-for="item in orderedItems"
@@ -27,7 +27,7 @@
           class="console-item"
           @click="handleEntryClick"
         />
-      </app-scrollable-container>
+      </app-auto-scroll-container>
     </v-card>
     <console-command
       v-if="!readonly && !flipLayout"
@@ -40,14 +40,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Mixins, Ref, PropSync } from 'vue-property-decorator'
+import { Component, Prop, Mixins, Ref } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import ConsoleCommand from './ConsoleCommand.vue'
 import ConsoleItem from './ConsoleItem.vue'
 import { SocketActions } from '@/api/socketActions'
 import type { ConsoleEntry } from '@/store/console/types'
 import type { UpdateResponse } from '@/store/version/types'
-import type AppScrollableContainer from '@/components/ui/AppScrollableContainer.vue'
+import type AppAutoScrollContainer from '@/components/ui/AppAutoScrollContainer.vue'
 
 @Component({
   components: {
@@ -65,11 +65,8 @@ export default class Console extends Mixins(StateMixin) {
   @Prop({ type: Boolean })
   readonly readonly?: boolean
 
-  @PropSync('scrollingPaused', { type: Boolean })
-  scrollingPausedModel?: boolean
-
   @Ref('consoleScroller')
-  readonly consoleScrollerElement!: AppScrollableContainer
+  readonly consoleScrollerElement!: AppAutoScrollContainer
 
   get currentCommand (): string {
     return this.$typedState.console.consoleCommand
diff --git a/src/components/widgets/console/ConsoleCard.vue b/src/components/widgets/console/ConsoleCard.vue
index f72bb9041a..6e7ad2f533 100644
--- a/src/components/widgets/console/ConsoleCard.vue
+++ b/src/components/widgets/console/ConsoleCard.vue
@@ -14,7 +14,7 @@
   >
     <template #menu>
       <app-btn
-        v-if="scrollingPaused"
+        v-if="autoScrollPaused"
         icon
         @click="consoleElement.scrollToLatest()"
       >
@@ -108,9 +108,9 @@
 
     <console
       ref="console"
-      :scrolling-paused.sync="scrollingPaused"
       :items="items"
       :fullscreen="fullscreen"
+      @update:auto-scroll-paused="autoScrollPaused = $event"
     />
   </collapsable-card>
 </template>
@@ -132,7 +132,7 @@ export default class ConsoleCard extends Vue {
   @Ref('console')
   readonly consoleElement!: Console
 
-  scrollingPaused = false
+  autoScrollPaused = false
 
   get filters (): ConsoleFilter[] {
     return this.$typedState.console.consoleFilters

From bef1ba8d8c58925dd96c69481795202592558c8d Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sun, 10 May 2026 21:42:31 +0100
Subject: [PATCH 4/4] refactor: follow up on PR comments

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/common/UpdatingDialog.vue     | 1 -
 src/components/layout/AppObservedColumn.vue  | 6 ++----
 src/components/ui/AppAutoScrollContainer.vue | 9 ++++++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/common/UpdatingDialog.vue b/src/components/common/UpdatingDialog.vue
index a5939be7cf..cdeeae55f2 100644
--- a/src/components/common/UpdatingDialog.vue
+++ b/src/components/common/UpdatingDialog.vue
@@ -11,7 +11,6 @@
       <console
         :items="responses"
         :fullscreen="isMobileViewport"
-        :height="250"
         readonly
       />
     </v-card-text>
diff --git a/src/components/layout/AppObservedColumn.vue b/src/components/layout/AppObservedColumn.vue
index 28f12c395c..2bd7fab557 100644
--- a/src/components/layout/AppObservedColumn.vue
+++ b/src/components/layout/AppObservedColumn.vue
@@ -37,10 +37,8 @@ export default class AppObservedColumn extends Vue {
   }
 
   beforeDestroy () {
-    if (this.observer) {
-      this.observer.disconnect()
-      this.observer = null
-    }
+    this.observer?.disconnect()
+    this.observer = null
   }
 }
 </script>
diff --git a/src/components/ui/AppAutoScrollContainer.vue b/src/components/ui/AppAutoScrollContainer.vue
index 3a605ada36..7678a1990a 100644
--- a/src/components/ui/AppAutoScrollContainer.vue
+++ b/src/components/ui/AppAutoScrollContainer.vue
@@ -21,7 +21,7 @@ export default class AppAutoScrollContainer extends Vue {
   readonly box!: HTMLElement
 
   autoScrollPaused = false
-  resizeObserver?: ResizeObserver
+  resizeObserver: ResizeObserver | null = null
 
   @Watch('reversed')
   onReversed () {
@@ -35,8 +35,10 @@ export default class AppAutoScrollContainer extends Vue {
 
   mounted () {
     this.scrollToLatest()
-    this.resizeObserver = markRaw(new ResizeObserver(() => this.updateAutoScrollPaused()))
-    this.resizeObserver.observe(this.box)
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = markRaw(new ResizeObserver(() => this.updateAutoScrollPaused()))
+      this.resizeObserver.observe(this.box)
+    }
   }
 
   updated () {
@@ -45,6 +47,7 @@ export default class AppAutoScrollContainer extends Vue {
 
   beforeDestroy () {
     this.resizeObserver?.disconnect()
+    this.resizeObserver = null
   }
 
   private updateAutoScrollPaused () {