[APM] Context Tabs jumping height fix (#32351) (#32410)

* [APM] fixes #18144 by setting the container min-height to the tab with the largest rendered height

* [APM] moved HeightRetainer into its own shared component module

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/TransactionPropertiesTable.tsx

@@ -18,6 +18,7 @@ import {
 import { Transaction } from '../../../../../typings/es_schemas/Transaction';
 import { IUrlParams } from '../../../../store/urlParams';
 import { px, units } from '../../../../style/variables';
+import { HeightRetainer } from '../../../shared/HeightRetainer';
 import {
   getPropertyTabNames,
   PropertiesTable
@@ -67,7 +68,7 @@ export function TransactionPropertiesTable({
   const isTimelineTab = currentTab.key === timelineTab.key;
 
   return (
-    <div>
+    <HeightRetainer>
       <EuiTabs>
         {tabs.map(({ key, label }) => {
           return (
@@ -108,6 +109,6 @@ export function TransactionPropertiesTable({
           />
         </TableContainer>
       )}
-    </div>
+    </HeightRetainer>
   );
 }

x-pack/plugins/apm/public/components/shared/HeightRetainer/index.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useEffect, useRef } from 'react';
+
+export const HeightRetainer: React.SFC = props => {
+  const containerElement = useRef<HTMLDivElement>(null);
+  const minHeight = useRef<number>(0);
+
+  useEffect(() => {
+    if (containerElement.current) {
+      const currentHeight = containerElement.current.clientHeight;
+      if (minHeight.current < currentHeight) {
+        minHeight.current = currentHeight;
+      }
+    }
+  });
+
+  return (
+    <div
+      {...props}
+      ref={containerElement}
+      style={{ minHeight: minHeight.current }}
+    />
+  );
+};