[Logs UI] Shrink log stream when window is resized (#38937)

* [Logs UI] Shrink log stream when window is resized

* Avoid using window resize events for width

x-pack/plugins/infra/public/components/auto_sizer.tsx

@@ -19,7 +19,7 @@ interface Measurements {
 }
 
 interface AutoSizerProps {
-  detectAnyWindowResize?: boolean;
+  detectAnyWindowResize?: boolean | 'height' | 'width';
   bounds?: boolean;
   content?: boolean;
   onResize?: (size: Measurements) => void;
@@ -37,6 +37,7 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
   public element: HTMLElement | null = null;
   public resizeObserver: ResizeObserver | null = null;
   public windowWidth: number = -1;
+  public windowHeight: number = -1;
 
   public readonly state = {
     boundsMeasurement: {
@@ -87,22 +88,31 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
     const boundsRect = bounds ? this.element.getBoundingClientRect() : null;
     const boundsMeasurement = boundsRect
       ? {
-          height: this.element.getBoundingClientRect().height,
-          width: this.element.getBoundingClientRect().width,
+          height: boundsRect.height,
+          width: boundsRect.width,
         }
       : previousBoundsMeasurement;
 
-    if (
-      this.props.detectAnyWindowResize &&
-      boundsMeasurement &&
-      boundsMeasurement.width &&
-      this.windowWidth !== -1 &&
-      this.windowWidth > window.innerWidth
-    ) {
-      const gap = this.windowWidth - window.innerWidth;
-      boundsMeasurement.width = boundsMeasurement.width - gap;
+    if (this.props.detectAnyWindowResize && boundsMeasurement) {
+      if (
+        boundsMeasurement.width &&
+        this.windowWidth !== -1 &&
+        this.windowWidth > window.innerWidth
+      ) {
+        const gap = this.windowWidth - window.innerWidth;
+        boundsMeasurement.width = boundsMeasurement.width - gap;
+      }
+      if (
+        boundsMeasurement.height &&
+        this.windowHeight !== -1 &&
+        this.windowHeight > window.innerHeight
+      ) {
+        const gap = this.windowHeight - window.innerHeight;
+        boundsMeasurement.height = boundsMeasurement.height - gap;
+      }
     }
     this.windowWidth = window.innerWidth;
+    this.windowHeight = window.innerHeight;
     const contentRect = content && entry ? entry.contentRect : null;
     const contentMeasurement =
       contentRect && entry
@@ -111,7 +121,6 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
             width: entry.contentRect.width,
           }
         : previousContentMeasurement;
-
     if (
       isEqual(boundsMeasurement, previousBoundsMeasurement) &&
       isEqual(contentMeasurement, previousContentMeasurement)
@@ -138,7 +147,6 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
   public render() {
     const { children } = this.props;
     const { boundsMeasurement, contentMeasurement } = this.state;
-
     return children({
       bounds: boundsMeasurement,
       content: contentMeasurement,
@@ -146,11 +154,25 @@ export class AutoSizer extends React.PureComponent<AutoSizerProps, AutoSizerStat
     });
   }
 
-  private updateMeasurement = () => {
-    window.setTimeout(() => {
-      this.measure(null);
-    }, 0);
-  };
+  private updateMeasurement = () =>
+    requestAnimationFrame(() => {
+      const { detectAnyWindowResize } = this.props;
+      if (!detectAnyWindowResize) return;
+      switch (detectAnyWindowResize) {
+        case 'height':
+          if (this.windowHeight !== window.innerHeight) {
+            this.measure(null);
+          }
+          break;
+        case 'width':
+          if (this.windowWidth !== window.innerWidth) {
+            this.measure(null);
+          }
+          break;
+        default:
+          this.measure(null);
+      }
+    });
 
   private storeRef = (element: HTMLElement | null) => {
     if (this.element && this.resizeObserver) {

x-pack/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx

@@ -155,8 +155,8 @@ class ScrollableLogTextStreamViewClass extends React.PureComponent<
                   columnWidths={columnWidths}
                   showColumnConfiguration={showColumnConfiguration}
                 />
-                <AutoSizer content>
-                  {({ measureRef, content: { width = 0, height = 0 } }) => (
+                <AutoSizer bounds content detectAnyWindowResize="height">
+                  {({ measureRef, bounds: { height = 0 }, content: { width = 0 } }) => (
                     <ScrollPanelSizeProbe innerRef={measureRef}>
                       <VerticalScrollPanel
                         height={height}

x-pack/plugins/infra/public/pages/logs/page_logs_content.tsx

@@ -111,8 +111,8 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
             </WithStreamItems>
           )}
         </WithLogPosition>
-        <AutoSizer content>
-          {({ measureRef, content: { width = 0, height = 0 } }) => {
+        <AutoSizer content bounds detectAnyWindowResize="height">
+          {({ measureRef, bounds: { height = 0 }, content: { width = 0 } }) => {
             return (
               <LogPageMinimapColumn innerRef={measureRef}>
                 <WithSummary>