refactor(devtools): fix issue with virtual scroll viewport in the dir…

…ective forest (#54912)

In some cases the height of the viewport wasn't calculated correctly because of extension tabs quirks. This commit fixes this issue.

Fixes #53704

PR Close #54912

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/directive-forest.component.ts

@@ -16,6 +16,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   EventEmitter,
   HostListener,
   Input,
@@ -99,11 +100,13 @@ export class DirectiveForestComponent {
   readonly itemHeight = 18;
 
   private _initialized = false;
+  private resizeObserver: ResizeObserver;
 
   constructor(
     private _tabUpdate: TabUpdate,
     private _messageBus: MessageBus<Events>,
     private _cdr: ChangeDetectorRef,
+    private elementRef: ElementRef,
   ) {
     this.subscribeToInspectorEvents();
     this._tabUpdate.tabUpdate$.pipe(takeUntilDestroyed()).subscribe(() => {
@@ -114,6 +117,17 @@ export class DirectiveForestComponent {
         });
       }
     });
+
+    // In some cases there a height changes, we need to recalculate the viewport size.
+    this.resizeObserver = new ResizeObserver(() => {
+      this.viewport.scrollToIndex(0);
+      this.viewport.checkViewportSize();
+    });
+    this.resizeObserver.observe(this.elementRef.nativeElement);
+  }
+
+  ngOnDestroy(): void {
+    this.resizeObserver.disconnect();
   }
 
   subscribeToInspectorEvents(): void {