fix(tracemetrics): Update split panel to use different ratio for nav open state (#103297)

Always tries to show all of the telemetry icons on the right panel in
the default split, not the minimum right side width.

Author: narsaynorath

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;

static/app/views/explore/metrics/metricPanel/sideBySideOrientation.tsx

@@ -8,15 +8,19 @@ 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';
 
 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 = (