diff --git a/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTable.tsx b/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTable.tsx index 439214f8ec3c4e..899b18e86eef2c 100644 --- a/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTable.tsx +++ b/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTable.tsx @@ -32,6 +32,8 @@ const TWO_MINUTE_DELAY = 120; const MAX_TELEMETRY_WIDTH = 40; export const SAMPLES_PANEL_MIN_WIDTH = 350; +export const WIDTH_WITH_TELEMETRY_ICONS_VISIBLE = + SAMPLES_PANEL_MIN_WIDTH + MAX_TELEMETRY_WIDTH * 3; interface MetricsSamplesTableProps { embedded?: boolean; diff --git a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx index e00c0928b1c980..e244497822df26 100644 --- a/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx +++ b/static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx @@ -8,7 +8,10 @@ import type {useMetricTimeseries} from 'sentry/views/explore/metrics/hooks/useMe import type {TableOrientation} from 'sentry/views/explore/metrics/hooks/useOrientationControl'; import {MetricsGraph} from 'sentry/views/explore/metrics/metricGraph'; import MetricInfoTabs from 'sentry/views/explore/metrics/metricInfoTabs'; -import {SAMPLES_PANEL_MIN_WIDTH} from 'sentry/views/explore/metrics/metricInfoTabs/metricsSamplesTable'; +import { + SAMPLES_PANEL_MIN_WIDTH, + WIDTH_WITH_TELEMETRY_ICONS_VISIBLE, +} from 'sentry/views/explore/metrics/metricInfoTabs/metricsSamplesTable'; import {HideContentButton} from 'sentry/views/explore/metrics/metricPanel/hideContentButton'; import {PanelPositionSelector} from 'sentry/views/explore/metrics/metricPanel/panelPositionSelector'; import type {TraceMetric} from 'sentry/views/explore/metrics/metricQuery'; @@ -16,7 +19,8 @@ import type {TraceMetric} from 'sentry/views/explore/metrics/metricQuery'; const MIN_LEFT_WIDTH = 400; // Defined by the size of the expected samples tab component -const PADDING_SIZE = 16; +const PADDING_SIZE = 20; +const DIVIDER_WIDTH = 16; const MIN_RIGHT_WIDTH = SAMPLES_PANEL_MIN_WIDTH + PADDING_SIZE; export function SideBySideOrientation({ @@ -42,11 +46,11 @@ export function SideBySideOrientation({ const {width} = useDimensions({elementRef: measureRef}); const hasSize = width > 0; - // Default split is 65% of the available width, but not less than MIN_LEFT_WIDTH - // and at most the maximum size allowed for the left panel (i.e. width - MIN_RIGHT_WIDTH) + // Default split is 65% of the available width but not less than MIN_LEFT_WIDTH + // while also accommodating the desired right panel width to show all of the telemetry icons. const defaultSplit = Math.min( Math.max(width * 0.65, MIN_LEFT_WIDTH), - width - MIN_RIGHT_WIDTH + width - (WIDTH_WITH_TELEMETRY_ICONS_VISIBLE + PADDING_SIZE + DIVIDER_WIDTH) ); const additionalActions = (