[APM] Responsive layout for backends detail (#108680)

Closes #108022.
elastic · Aug 17, 2021 · 0e547e4 · 0e547e4
1 parent 6a39dc1
commit 0e547e4
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/index.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/index.tsx
@@ -23,6 +23,7 @@ import { BackendDetailDependenciesTable } from './backend_detail_dependencies_ta
 import { BackendThroughputChart } from './backend_throughput_chart';
 import { BackendFailedTransactionRateChart } from './backend_error_rate_chart';
 import { BackendDetailTemplate } from '../../routing/templates/backend_detail_template';
+import { useBreakPoints } from '../../../hooks/use_break_points';
 
 export function BackendDetailOverview() {
   const {
@@ -53,12 +54,17 @@ export function BackendDetailOverview() {
     },
   ]);
 
+  const largeScreenOrSmaller = useBreakPoints().isLarge;
+
   return (
     <ApmBackendContextProvider>
       <BackendDetailTemplate title={backendName}>
         <SearchBar showTimeComparison />
         <ChartPointerEventContextProvider>
-          <EuiFlexGroup direction="row" gutterSize="s">
+          <EuiFlexGroup
+            direction={largeScreenOrSmaller ? 'column' : 'row'}
+            gutterSize="s"
+          >
             <EuiFlexItem>
               <EuiPanel hasBorder={true}>
                 <EuiTitle size="xs">