feat(replays): Choose default Replay Details layout depending on window aspect ratio (#37370)

Closes #37237

static/app/views/replays/detail/layout/chooseLayout.tsx

@@ -1,6 +1,9 @@
 import CompactSelect from 'sentry/components/forms/compactSelect';
 import {IconPanel} from 'sentry/icons';
+import PreferencesStore from 'sentry/stores/preferencesStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import useUrlParam from 'sentry/utils/replays/hooks/useUrlParams';
+import {getDefaultLayout} from 'sentry/views/replays/detail/layout/utils';
 
 const LAYOUT_NAMES = ['topbar', 'sidebar_left', 'sidebar_right'];
 const layoutLabels = {
@@ -22,8 +25,11 @@ function getLayoutIcon(layout: string) {
 type Props = {};
 
 function ChooseLayout({}: Props) {
-  const {getParamValue, setParamValue} = useUrlParam('l_page', 'topbar');
-
+  const collapsed = !!useLegacyStore(PreferencesStore).collapsed;
+  const {getParamValue, setParamValue} = useUrlParam(
+    'l_page',
+    getDefaultLayout(collapsed)
+  );
   return (
     <CompactSelect
       triggerProps={{

static/app/views/replays/detail/layout/index.tsx

@@ -16,7 +16,7 @@ import SplitPanel from 'sentry/views/replays/detail/layout/splitPanel';
 import SideTabs from 'sentry/views/replays/detail/sideTabs';
 import TagPanel from 'sentry/views/replays/detail/tagPanel';
 
-type Layout =
+export type LayoutModes =
   /**
    * ### Sidebar Right
    * ┌───────────────────┐
@@ -64,7 +64,7 @@ const MIN_CONTENT_HEIGHT = {px: 200};
 const MIN_CRUMBS_HEIGHT = {px: 200};
 
 type Props = {
-  layout?: Layout;
+  layout?: LayoutModes;
   showCrumbs?: boolean;
   showTimeline?: boolean;
   showVideo?: boolean;

static/app/views/replays/detail/layout/utils.tsx

@@ -0,0 +1,22 @@
+import theme from 'sentry/utils/theme';
+import {LayoutModes} from 'sentry/views/replays/detail/layout';
+
+export const getDefaultLayout = (collapsed: boolean): LayoutModes => {
+  const {innerWidth, innerHeight} = window;
+
+  const sidebarWidth = parseInt(
+    collapsed ? theme.sidebar.collapsedWidth : theme.sidebar.expandedWidth,
+    10
+  );
+
+  const mediumScreenWidth = parseInt(theme.breakpoints.medium, 10);
+
+  const windowsWidth =
+    innerWidth <= mediumScreenWidth ? innerWidth : innerWidth - sidebarWidth;
+
+  if (windowsWidth < innerHeight) {
+    return 'topbar';
+  }
+
+  return 'sidebar_left';
+};

static/app/views/replays/details.tsx

@@ -7,11 +7,14 @@ import {
   useReplayContext,
 } from 'sentry/components/replays/replayContext';
 import {t} from 'sentry/locale';
+import PreferencesStore from 'sentry/stores/preferencesStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {PageContent} from 'sentry/styles/organization';
 import useReplayData from 'sentry/utils/replays/hooks/useReplayData';
 import useUrlParam from 'sentry/utils/replays/hooks/useUrlParams';
 import {useRouteContext} from 'sentry/utils/useRouteContext';
 import Layout from 'sentry/views/replays/detail/layout';
+import {getDefaultLayout} from 'sentry/views/replays/detail/layout/utils';
 import Page from 'sentry/views/replays/detail/page';
 
 const LAYOUT_NAMES = ['topbar', 'sidebar_right', 'sidebar_left'];
@@ -71,7 +74,8 @@ function ReplayDetails() {
 }
 
 function LoadedDetails({orgId}: {orgId: string}) {
-  const {getParamValue} = useUrlParam('l_page', 'topbar');
+  const collapsed = !!useLegacyStore(PreferencesStore).collapsed;
+  const {getParamValue} = useUrlParam('l_page', getDefaultLayout(collapsed));
   const {replay} = useReplayContext();
   const durationMs = replay?.getDurationMs();