Use AutoSizeVirtualScrollStrategy

src-ui/package.json

@@ -12,6 +12,7 @@
   "private": true,
   "dependencies": {
     "@angular/cdk": "^20.2.13",
+    "@angular/cdk-experimental": "^20.2.14",
     "@angular/common": "~20.3.12",
     "@angular/compiler": "~20.3.12",
     "@angular/core": "~20.3.12",

src-ui/pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@angular/cdk':
         specifier: ^20.2.13
         version: 20.2.13(@angular/common@20.3.12(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/cdk-experimental':
+        specifier: ^20.2.14
+        version: 20.2.14(@angular/cdk@20.2.13(@angular/common@20.3.12(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))
       '@angular/common':
         specifier: ~20.3.12
         version: 20.3.12(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
@@ -495,6 +498,12 @@ packages:
       vitest:
         optional: true
 
+  '@angular/cdk-experimental@20.2.14':
+    resolution: {integrity: sha512-oTqd8fV9m8HfzIpd1GXJ9OOKhTV/2D3hPfhZjG4puTQ5JeWcljVR2T/fZHpWGnNRoHJL5MkIkQP6338uJbX22Q==}
+    peerDependencies:
+      '@angular/cdk': 20.2.14
+      '@angular/core': ^20.0.0 || ^21.0.0
+
   '@angular/cdk@20.2.13':
     resolution: {integrity: sha512-h1jTkCmJ/rEQQMkxgKFMCBOrMfjZEnppgdekNmSTerwdVp4vdosTDTzFH/kwiOGFeRClffmvqQ2XLG8mQOKOtA==}
     peerDependencies:
@@ -7443,6 +7452,12 @@ snapshots:
       - tsx
       - yaml
 
+  '@angular/cdk-experimental@20.2.14(@angular/cdk@20.2.13(@angular/common@20.3.12(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))':
+    dependencies:
+      '@angular/cdk': 20.2.13(@angular/common@20.3.12(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)
+      '@angular/core': 20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1)
+      tslib: 2.8.1
+
   '@angular/cdk@20.2.13(@angular/common@20.3.12(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2))(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)':
     dependencies:
       '@angular/common': 20.3.12(@angular/core@20.3.12(@angular/compiler@20.3.12)(rxjs@7.8.2)(zone.js@0.15.1))(rxjs@7.8.2)

src-ui/src/app/components/admin/logs/logs.component.html

@@ -44,7 +44,9 @@
 <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
 <cdk-virtual-scroll-viewport
-  itemSize="20"
+  autosize
+  [minBufferPx]="200"
+  [maxBufferPx]="600"
   class="bg-dark p-3 text-light font-monospace log-container"
   #logContainer>
   @if (loading && !logFiles.length) {

src-ui/src/app/components/admin/logs/logs.component.ts

@@ -1,6 +1,7 @@
+import { ScrollingModule } from '@angular/cdk-experimental/scrolling'
 import {
+  CdkVirtualForOf,
   CdkVirtualScrollViewport,
-  ScrollingModule,
 } from '@angular/cdk/scrolling'
 import { CommonModule } from '@angular/common'
 import {
@@ -28,6 +29,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
+    CdkVirtualForOf,
     CdkVirtualScrollViewport,
     ScrollingModule,
   ],
@@ -144,7 +146,7 @@ export class LogsComponent
   scrollToBottom(): void {
     this.changedetectorRef.detectChanges()
     if (this.logContainer) {
-      this.logContainer.scrollToIndex(this.logs.length - 1)
+      // this.logContainer.scrollToIndex(this.logs.length - 1)
     }
   }
 }