[APM] Adjust responsive flyout sizing (WIP) (#32021) (#32355)

* [APM] Adjust responsive flyout sizing

The responsive values for the Transaction details need an update in order to contain more content, especially on larger screens, where the flyout just feels a little too slim.

* [APM] exterinalize ResponsiveFlyout styled component, then used it in Transaction and Span flyouts

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/ResponsiveFlyout.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 { EuiFlyout } from '@elastic/eui';
+
+import styled from 'styled-components';
+
+export const ResponsiveFlyout = styled(EuiFlyout)`
+  width: 100%;
+
+  @media (min-width: 800px) {
+    width: 90%;
+  }
+
+  @media (min-width: 1000px) {
+    width: 80%;
+  }
+
+  @media (min-width: 1400px) {
+    width: 70%;
+  }
+
+  @media (min-width: 2000px) {
+    width: 60%;
+  }
+`;

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/index.tsx

@@ -9,7 +9,6 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiHorizontalRule,
@@ -28,6 +27,7 @@ import { Stacktrace } from 'x-pack/plugins/apm/public/components/shared/Stacktra
 import { Transaction } from 'x-pack/plugins/apm/typings/es_schemas/Transaction';
 import { Span } from '../../../../../../../../typings/es_schemas/Span';
 import { FlyoutTopLevelProperties } from '../FlyoutTopLevelProperties';
+import { ResponsiveFlyout } from '../ResponsiveFlyout';
 import { DatabaseContext } from './DatabaseContext';
 import { HttpContext } from './HttpContext';
 import { StickySpanProperties } from './StickySpanProperties';
@@ -65,7 +65,7 @@ export function SpanFlyout({
 
   return (
     <EuiPortal>
-      <EuiFlyout onClose={onClose} size="m" ownFocus={true}>
+      <ResponsiveFlyout onClose={onClose} size="m" ownFocus={true}>
         <EuiFlyoutHeader hasBorder>
           <EuiFlexGroup>
             <EuiFlexItem grow={false}>
@@ -152,7 +152,7 @@ export function SpanFlyout({
             ]}
           />
         </EuiFlyoutBody>
-      </EuiFlyout>
+      </ResponsiveFlyout>
     </EuiPortal>
   );
 }

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx

@@ -8,7 +8,6 @@ import {
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiHorizontalRule,
@@ -19,7 +18,6 @@ import {
 import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
 import React from 'react';
-import styled from 'styled-components';
 import { idx } from 'x-pack/plugins/apm/common/idx';
 import { TransactionActionMenu } from 'x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu';
 import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
@@ -28,6 +26,7 @@ import { Transaction } from 'x-pack/plugins/apm/typings/es_schemas/Transaction';
 import { StickyTransactionProperties } from '../../../StickyTransactionProperties';
 import { TransactionPropertiesTableForFlyout } from '../../../TransactionPropertiesTableForFlyout';
 import { FlyoutTopLevelProperties } from '../FlyoutTopLevelProperties';
+import { ResponsiveFlyout } from '../ResponsiveFlyout';
 
 interface Props {
   onClose: () => void;
@@ -38,26 +37,6 @@ interface Props {
   traceRootDuration?: number;
 }
 
-const ResponsiveFlyout = styled(EuiFlyout)`
-  width: 100%;
-
-  @media (min-width: 800px) {
-    width: 90%;
-  }
-
-  @media (min-width: 1000px) {
-    width: 70%;
-  }
-
-  @media (min-width: 1400px) {
-    width: 50%;
-  }
-
-  @media (min-width: 2000px) {
-    width: 35%;
-  }
-`;
-
 function DroppedSpansWarning({
   transactionDoc
 }: {