diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/Distribution/index.tsx
index e53aaf97cdf75..24257bcefa7f1 100644
--- a/x-pack/plugins/apm/public/components/app/error_group_details/Distribution/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/error_group_details/Distribution/index.tsx
@@ -75,6 +75,7 @@ export function ErrorDistribution({ distribution, title }: Props) {
   );
 
   const tooltipProps: SettingsSpec['tooltip'] = {
+    stickTo: 'top',
     headerFormatter: (tooltip: TooltipValue) => {
       const serie = buckets.find((bucket) => bucket.x0 === tooltip.value);
       if (serie) {
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx
index a2db4cc87a81b..4ff094c025451 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/Distribution/index.tsx
@@ -135,6 +135,7 @@ export function TransactionDistribution({
   const bucketsMap = keyBy(buckets, 'x0');
 
   const tooltip: SettingsSpec['tooltip'] = {
+    stickTo: 'top',
     customTooltip: (props: TooltipInfo) => {
       const datum = props.header?.datum as IChartPoint;
       const selectedDistribution = distributionMap[datum?.x0];
diff --git a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
index 0ad4be17e35cb..b7d1d37d2c0d0 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
@@ -61,6 +61,7 @@ export function InstancesLatencyDistributionChart({
   const latencyFormatter = getDurationFormatter(maxLatency);
 
   const tooltip: TooltipProps = {
+    stickTo: 'center',
     type: TooltipType.Follow,
     snap: false,
     customTooltip: (props: TooltipInfo) => (
diff --git a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
index 9667bbd33cc73..65ecdec0f36a5 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
@@ -15,7 +15,6 @@ import {
   LineAnnotation,
   LineSeries,
   niceTimeFormatter,
-  Placement,
   Position,
   RectAnnotation,
   ScaleType,
@@ -36,17 +35,17 @@ import {
   RectCoordinate,
   TimeSeries,
 } from '../../../../typings/timeseries';
-import { FETCH_STATUS } from '../../../hooks/use_fetcher';
-import { useTheme } from '../../../hooks/use_theme';
 import { useAnnotationsContext } from '../../../context/annotations/use_annotations_context';
+import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
+import { APMServiceAlert } from '../../../context/apm_service/apm_service_context';
 import { useChartPointerEventContext } from '../../../context/chart_pointer_event/use_chart_pointer_event_context';
+import { FETCH_STATUS } from '../../../hooks/use_fetcher';
+import { useTheme } from '../../../hooks/use_theme';
+import { getLatencyChartSelector } from '../../../selectors/latency_chart_selectors';
 import { unit } from '../../../utils/style';
 import { ChartContainer } from './chart_container';
-import { onBrushEnd, isTimeseriesEmpty } from './helper/helper';
-import { getLatencyChartSelector } from '../../../selectors/latency_chart_selectors';
-import { APMServiceAlert } from '../../../context/apm_service/apm_service_context';
 import { getAlertAnnotations } from './helper/get_alert_annotations';
-import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
+import { isTimeseriesEmpty, onBrushEnd } from './helper/helper';
 
 interface Props {
   id: string;
@@ -115,6 +114,7 @@ export function TimeseriesChart({
     >
       <Chart ref={chartRef} id={id}>
         <Settings
+          tooltip={{ stickTo: 'top' }}
           onBrushEnd={({ x }) => onBrushEnd({ x, history })}
           theme={{
             ...chartTheme,
@@ -125,7 +125,7 @@ export function TimeseriesChart({
           }}
           onPointerUpdate={setPointerEvent}
           externalPointerEvents={{
-            tooltip: { visible: true, placement: Placement.Right },
+            tooltip: { visible: true },
           }}
           showLegend
           showLegendExtra
diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx
index a68373892e78b..4fdfbff7917d1 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_breakdown_chart/transaction_breakdown_chart_contents.tsx
@@ -13,7 +13,6 @@ import {
   CurveType,
   LineAnnotation,
   niceTimeFormatter,
-  Placement,
   Position,
   ScaleType,
   Settings,
@@ -29,11 +28,11 @@ import {
   asPercent,
 } from '../../../../../common/utils/formatters';
 import { Coordinate, TimeSeries } from '../../../../../typings/timeseries';
-import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
-import { useTheme } from '../../../../hooks/use_theme';
-import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { useAnnotationsContext } from '../../../../context/annotations/use_annotations_context';
 import { useChartPointerEventContext } from '../../../../context/chart_pointer_event/use_chart_pointer_event_context';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
+import { useTheme } from '../../../../hooks/use_theme';
 import { unit } from '../../../../utils/style';
 import { ChartContainer } from '../../charts/chart_container';
 import { isTimeseriesEmpty, onBrushEnd } from '../../charts/helper/helper';
@@ -73,6 +72,7 @@ export function TransactionBreakdownChartContents({
     <ChartContainer height={height} hasData={!isEmpty} status={fetchStatus}>
       <Chart ref={chartRef}>
         <Settings
+          tooltip={{ stickTo: 'top' }}
           onBrushEnd={({ x }) => onBrushEnd({ x, history })}
           showLegend
           showLegendExtra
@@ -82,7 +82,9 @@ export function TransactionBreakdownChartContents({
           flatLegend
           onPointerUpdate={setPointerEvent}
           externalPointerEvents={{
-            tooltip: { visible: true, placement: Placement.Bottom },
+            tooltip: {
+              visible: true,
+            },
           }}
         />
         <Axis
diff --git a/x-pack/plugins/apm/public/components/shared/search_bar.tsx b/x-pack/plugins/apm/public/components/shared/search_bar.tsx
index afdf4c12f41a5..b356f68dba2f0 100644
--- a/x-pack/plugins/apm/public/components/shared/search_bar.tsx
+++ b/x-pack/plugins/apm/public/components/shared/search_bar.tsx
@@ -11,6 +11,7 @@ import {
   EuiFlexItem,
   EuiLink,
   EuiSpacer,
+  EuiFlexGroupProps,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -83,23 +84,26 @@ export function SearchBar({
   showTimeComparison = false,
   showTransactionTypeSelector = false,
 }: Props) {
-  const { isSmall, isMedium, isLarge, isXl, isXXL } = useBreakPoints();
+  const { isSmall, isMedium, isLarge, isXl, isXXL, isXXXL } = useBreakPoints();
 
   if (hidden) {
     return null;
   }
 
+  const searchBarDirection: EuiFlexGroupProps['direction'] =
+    isXXXL || (!isXl && !showTimeComparison) ? 'row' : 'column';
+
   return (
     <>
       <DebugQueryCallout />
       <EuiFlexGroup
         gutterSize="s"
         responsive={false}
-        direction={isXXL ? 'row' : 'column'}
+        direction={searchBarDirection}
       >
         <EuiFlexItem>
           <EuiFlexGroup
-            direction={isSmall ? 'columnReverse' : 'row'}
+            direction={isLarge ? 'columnReverse' : 'row'}
             gutterSize="s"
             responsive={false}
           >
@@ -116,15 +120,15 @@ export function SearchBar({
             )}
           </EuiFlexGroup>
         </EuiFlexItem>
-        <EuiFlexItem grow={showTimeComparison && !isXXL}>
+        <EuiFlexItem grow={showTimeComparison && !isXXXL}>
           <EuiFlexGroup
             direction={isSmall || isMedium || isLarge ? 'columnReverse' : 'row'}
-            justifyContent={isXl ? 'flexEnd' : undefined}
+            justifyContent={isXXL ? 'flexEnd' : undefined}
             gutterSize="s"
             responsive={false}
           >
             {showTimeComparison && (
-              <EuiFlexItem grow={isXXL} style={{ minWidth: 300 }}>
+              <EuiFlexItem grow={isXXXL} style={{ minWidth: 300 }}>
                 <TimeComparison />
               </EuiFlexItem>
             )}
diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
index d7dfd3de2b628..f8accc1d48b9a 100644
--- a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
@@ -150,7 +150,7 @@ export function getSelectOptions({
 export function TimeComparison() {
   const trackApmEvent = useUiTracker({ app: 'apm' });
   const history = useHistory();
-  const { isMedium, isLarge } = useBreakPoints();
+  const { isSmall } = useBreakPoints();
   const {
     urlParams: { comparisonEnabled, comparisonType, exactStart, exactEnd },
   } = useUrlParams();
@@ -191,7 +191,7 @@ export function TimeComparison() {
 
   return (
     <EuiSelect
-      fullWidth={!isMedium && isLarge}
+      fullWidth={isSmall}
       data-test-subj="comparisonSelect"
       disabled={!comparisonEnabled}
       options={selectOptions}
diff --git a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
index e257eb3322b9b..b0f90cfc53971 100644
--- a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
@@ -10,6 +10,7 @@ import React, { FormEvent, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { useApmServiceContext } from '../../context/apm_service/use_apm_service_context';
+import { useBreakPoints } from '../../hooks/use_break_points';
 import * as urlHelpers from './Links/url_helpers';
 
 // The default transaction type (for non-RUM services) is "request". Set the
@@ -20,6 +21,7 @@ const EuiSelectWithWidth = styled(EuiSelect)`
 `;
 
 export function TransactionTypeSelect() {
+  const { isSmall } = useBreakPoints();
   const { transactionTypes, transactionType } = useApmServiceContext();
   const history = useHistory();
 
@@ -38,6 +40,7 @@ export function TransactionTypeSelect() {
   return (
     <>
       <EuiSelectWithWidth
+        fullWidth={isSmall}
         data-test-subj="headerFilterTransactionType"
         onChange={handleChange}
         options={options}
diff --git a/x-pack/plugins/apm/public/hooks/use_break_points.test.ts b/x-pack/plugins/apm/public/hooks/use_break_points.test.ts
new file mode 100644
index 0000000000000..66cfd3119a26b
--- /dev/null
+++ b/x-pack/plugins/apm/public/hooks/use_break_points.test.ts
@@ -0,0 +1,153 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getScreenSizes } from './use_break_points';
+
+describe('use_break_points', () => {
+  describe('getScreenSizes', () => {
+    it('return xs when within 0px - 5740x', () => {
+      expect(getScreenSizes(0)).toEqual({
+        isXSmall: true,
+        isSmall: true,
+        isMedium: true,
+        isLarge: true,
+        isXl: true,
+        isXXL: true,
+        isXXXL: false,
+      });
+      expect(getScreenSizes(574)).toEqual({
+        isXSmall: true,
+        isSmall: true,
+        isMedium: true,
+        isLarge: true,
+        isXl: true,
+        isXXL: true,
+        isXXXL: false,
+      });
+    });
+    it('return s when within 575px - 767px', () => {
+      expect(getScreenSizes(575)).toEqual({
+        isXSmall: false,
+        isSmall: true,
+        isMedium: true,
+        isLarge: true,
+        isXl: true,
+        isXXL: true,
+        isXXXL: false,
+      });
+      expect(getScreenSizes(767)).toEqual({
+        isXSmall: false,
+        isSmall: true,
+        isMedium: true,
+        isLarge: true,
+        isXl: true,
+        isXXL: true,
+        isXXXL: false,
+      });
+    });
+    it('return m when within 768px - 991', () => {
+      expect(getScreenSizes(768)).toEqual({
+        isXSmall: false,
+        isSmall: false,
+        isMedium: true,
+        isLarge: true,
+        isXl: true,
+        isXXL: true,
+        isXXXL: false,
+      });
+      expect(getScreenSizes(991)).toEqual({
+        isXSmall: false,
+        isSmall: false,
+        isMedium: true,
+        isLarge: true,
+        isXl: true,
+        isXXL: true,
+        isXXXL: false,
+      });
+    });
+    it('return l when within 992px - 1199px', () => {
+      expect(getScreenSizes(992)).toEqual({
+        isXSmall: false,
+        isSmall: false,
+        isMedium: false,
+        isLarge: true,
+        isXl: true,
+        isXXL: true,
+        isXXXL: false,
+      });
+      expect(getScreenSizes(1199)).toEqual({
+        isXSmall: false,
+        isSmall: false,
+        isMedium: false,
+        isLarge: true,
+        isXl: true,
+        isXXL: true,
+        isXXXL: false,
+      });
+    });
+    it('return xl when within 1200px - 1599px', () => {
+      expect(getScreenSizes(1200)).toEqual({
+        isXSmall: false,
+        isSmall: false,
+        isMedium: false,
+        isLarge: false,
+        isXl: true,
+        isXXL: true,
+        isXXXL: false,
+      });
+      expect(getScreenSizes(1599)).toEqual({
+        isXSmall: false,
+        isSmall: false,
+        isMedium: false,
+        isLarge: false,
+        isXl: true,
+        isXXL: true,
+        isXXXL: false,
+      });
+    });
+    it('return xxl when within 1600px - 1999px', () => {
+      expect(getScreenSizes(1600)).toEqual({
+        isXSmall: false,
+        isSmall: false,
+        isMedium: false,
+        isLarge: false,
+        isXl: false,
+        isXXL: true,
+        isXXXL: false,
+      });
+      expect(getScreenSizes(1999)).toEqual({
+        isXSmall: false,
+        isSmall: false,
+        isMedium: false,
+        isLarge: false,
+        isXl: false,
+        isXXL: true,
+        isXXXL: false,
+      });
+    });
+    it('return xxxl when greater than or equals to 2000px', () => {
+      expect(getScreenSizes(2000)).toEqual({
+        isXSmall: false,
+        isSmall: false,
+        isMedium: false,
+        isLarge: false,
+        isXl: false,
+        isXXL: false,
+        isXXXL: true,
+      });
+      expect(getScreenSizes(3000)).toEqual({
+        isXSmall: false,
+        isSmall: false,
+        isMedium: false,
+        isLarge: false,
+        isXl: false,
+        isXXL: false,
+        isXXXL: true,
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/apm/public/hooks/use_break_points.ts b/x-pack/plugins/apm/public/hooks/use_break_points.ts
index fb8dc8f6a55b8..e6e7dc2dff899 100644
--- a/x-pack/plugins/apm/public/hooks/use_break_points.ts
+++ b/x-pack/plugins/apm/public/hooks/use_break_points.ts
@@ -8,20 +8,17 @@
 import { useState } from 'react';
 import useWindowSize from 'react-use/lib/useWindowSize';
 import useDebounce from 'react-use/lib/useDebounce';
-import { isWithinMaxBreakpoint } from '@elastic/eui';
+import { isWithinMaxBreakpoint, isWithinMinBreakpoint } from '@elastic/eui';
 
-function isMinXXL(windowWidth: number) {
-  return windowWidth >= 1600;
-}
-
-function getScreenSizes(windowWidth: number) {
-  const isXXL = isMinXXL(windowWidth);
+export function getScreenSizes(windowWidth: number) {
   return {
+    isXSmall: isWithinMaxBreakpoint(windowWidth, 'xs'),
     isSmall: isWithinMaxBreakpoint(windowWidth, 's'),
     isMedium: isWithinMaxBreakpoint(windowWidth, 'm'),
     isLarge: isWithinMaxBreakpoint(windowWidth, 'l'),
-    isXl: isWithinMaxBreakpoint(windowWidth, 'xl') && !isXXL,
-    isXXL,
+    isXl: isWithinMaxBreakpoint(windowWidth, 1599),
+    isXXL: isWithinMaxBreakpoint(windowWidth, 1999),
+    isXXXL: isWithinMinBreakpoint(windowWidth, 2000),
   };
 }