Revert "ref(replays): Refactor the replay layout impl to use more gap + grid (#48874)"

This reverts commit c4d27813ea85616242691119ee00ea1ce9680e8a.

Co-authored-by: ryan953 <187460+ryan953@users.noreply.github.com>

static/app/components/replays/breadcrumbs/replayTimeline.tsx

@@ -33,7 +33,7 @@ function ReplayTimeline({}: Props) {
   const networkSpans = replay.getNetworkSpans();
 
   return (
-    <StyledPanel ref={elem} {...mouseTrackingProps}>
+    <Panel ref={elem} {...mouseTrackingProps}>
       <Resizeable>
         {({width}) => (
           <Stacked>
@@ -58,14 +58,10 @@ function ReplayTimeline({}: Props) {
           </Stacked>
         )}
       </Resizeable>
-    </StyledPanel>
+    </Panel>
   );
 }
 
-const StyledPanel = styled(Panel)`
-  margin: 0;
-`;
-
 const UnderTimestamp = styled('div')<{paddingTop: string}>`
   /* Weird size to put equal space above/below a <small> node that MajorGridlines emits */
   padding-top: ${p => p.paddingTop};

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

@@ -13,7 +13,7 @@ import type {Crumb} from 'sentry/types/breadcrumbs';
 import ConsoleFilters from 'sentry/views/replays/detail/console/consoleFilters';
 import ConsoleLogRow from 'sentry/views/replays/detail/console/consoleLogRow';
 import useConsoleFilters from 'sentry/views/replays/detail/console/useConsoleFilters';
-import FluidGrid from 'sentry/views/replays/detail/layout/fluidGrid';
+import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 import NoRowRenderer from 'sentry/views/replays/detail/noRowRenderer';
 import TabItemContainer from 'sentry/views/replays/detail/tabItemContainer';
 import useVirtualizedList from 'sentry/views/replays/detail/useVirtualizedList';
@@ -81,7 +81,7 @@ function Console({breadcrumbs, startTimestampMs}: Props) {
   };
 
   return (
-    <FluidGrid>
+    <FluidHeight>
       <ConsoleFilters breadcrumbs={breadcrumbs} {...filterProps} />
       <TabItemContainer>
         {breadcrumbs ? (
@@ -111,7 +111,7 @@ function Console({breadcrumbs, startTimestampMs}: Props) {
           <Placeholder height="100%" />
         )}
       </TabItemContainer>
-    </FluidGrid>
+    </FluidHeight>
   );
 }
 

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

@@ -14,7 +14,7 @@ import type ReplayReader from 'sentry/utils/replays/replayReader';
 import DomFilters from 'sentry/views/replays/detail/domMutations/domFilters';
 import DomMutationRow from 'sentry/views/replays/detail/domMutations/domMutationRow';
 import useDomFilters from 'sentry/views/replays/detail/domMutations/useDomFilters';
-import FluidGrid from 'sentry/views/replays/detail/layout/fluidGrid';
+import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 import NoRowRenderer from 'sentry/views/replays/detail/noRowRenderer';
 import TabItemContainer from 'sentry/views/replays/detail/tabItemContainer';
 import useVirtualizedList from 'sentry/views/replays/detail/useVirtualizedList';
@@ -71,7 +71,7 @@ function DomMutations({replay, startTimestampMs}: Props) {
   };
 
   return (
-    <FluidGrid>
+    <FluidHeight>
       <DomFilters actions={actions} {...filterProps} />
       <TabItemContainer>
         {isLoading || !actions ? (
@@ -101,7 +101,7 @@ function DomMutations({replay, startTimestampMs}: Props) {
           </AutoSizer>
         )}
       </TabItemContainer>
-    </FluidGrid>
+    </FluidHeight>
   );
 }
 

static/app/views/replays/detail/filtersGrid.tsx

@@ -9,6 +9,7 @@ const FiltersGrid = styled('div')`
   grid-template-columns:
     repeat(${p => Children.toArray(p.children).length - 1}, max-content)
     1fr;
+  margin-bottom: ${space(1)};
   @media (max-width: ${p => p.theme.breakpoints.small}) {
     margin-top: ${space(1)};
   }

static/app/views/replays/detail/issueList.tsx

@@ -17,7 +17,6 @@ import theme from 'sentry/utils/theme';
 import useApi from 'sentry/utils/useApi';
 import useMedia from 'sentry/utils/useMedia';
 import useOrganization from 'sentry/utils/useOrganization';
-import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 
 type Props = {
   projectId: string;
@@ -84,30 +83,28 @@ function IssueList({projectId, replayId}: Props) {
   });
 
   return (
-    <FluidHeight>
-      <ReplayCountContext.Provider value={counts}>
-        <StyledPanelTable
-          isEmpty={state.issues.length === 0}
-          emptyMessage={t('No Issues are related')}
-          isLoading={state.fetching}
-          headers={
-            isScreenLarge ? columns : columns.filter(column => column !== t('Graph'))
-          }
-        >
-          {state.issues
-            // prioritize the replay issues first
-            .sort(a => (a.project.id === projectId ? -1 : 1))
-            .map(issue => (
-              <TableRow
-                key={issue.id}
-                isScreenLarge={isScreenLarge}
-                issue={issue}
-                organization={organization}
-              />
-            )) || null}
-        </StyledPanelTable>
-      </ReplayCountContext.Provider>
-    </FluidHeight>
+    <ReplayCountContext.Provider value={counts}>
+      <StyledPanelTable
+        isEmpty={state.issues.length === 0}
+        emptyMessage={t('No Issues are related')}
+        isLoading={state.fetching}
+        headers={
+          isScreenLarge ? columns : columns.filter(column => column !== t('Graph'))
+        }
+      >
+        {state.issues
+          // prioritize the replay issues first
+          .sort(a => (a.project.id === projectId ? -1 : 1))
+          .map(issue => (
+            <TableRow
+              key={issue.id}
+              isScreenLarge={isScreenLarge}
+              issue={issue}
+              organization={organization}
+            />
+          )) || null}
+      </StyledPanelTable>
+    </ReplayCountContext.Provider>
   );
 }
 

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

@@ -1,16 +0,0 @@
-import styled from '@emotion/styled';
-
-import {space} from 'sentry/styles/space';
-
-/**
- * The default grid template is `max-content 1fr`, feel free to extend the
- * component with `styled()` and override it.
- */
-const FluidGrid = styled('section')`
-  display: grid;
-  grid-template-rows: max-content 1fr;
-  gap: ${space(1)};
-  height: 100%;
-`;
-
-export default FluidGrid;

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

@@ -0,0 +1,33 @@
+import {LegacyRef, ReactChild} from 'react';
+import styled from '@emotion/styled';
+
+type Props = {
+  children: ReactChild;
+  bodyRef?: LegacyRef<HTMLDivElement> | undefined;
+  bottom?: ReactChild;
+  className?: string;
+  title?: ReactChild;
+};
+
+function FluidPanel({className, children, bottom, title, bodyRef}: Props) {
+  return (
+    <FluidContainer className={className}>
+      {title}
+      <OverflowBody ref={bodyRef}>{children}</OverflowBody>
+      {bottom}
+    </FluidContainer>
+  );
+}
+
+const FluidContainer = styled('section')`
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: 100%;
+`;
+
+const OverflowBody = styled('div')`
+  height: 100%;
+  overflow: auto;
+`;
+
+export default FluidPanel;

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

@@ -6,8 +6,8 @@ import ReplayView from 'sentry/components/replays/replayView';
 import {space} from 'sentry/styles/space';
 import useFullscreen from 'sentry/utils/replays/hooks/useFullscreen';
 import {LayoutKey} from 'sentry/utils/replays/hooks/useReplayLayout';
-import FluidGrid from 'sentry/views/replays/detail/layout/fluidGrid';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
+import FluidPanel from 'sentry/views/replays/detail/layout/fluidPanel';
 import FocusArea from 'sentry/views/replays/detail/layout/focusArea';
 import FocusTabs from 'sentry/views/replays/detail/layout/focusTabs';
 import MeasureSize from 'sentry/views/replays/detail/layout/measureSize';
@@ -56,19 +56,17 @@ function ReplayLayout({layout = LayoutKey.topbar}: Props) {
 
   const focusArea = (
     <ErrorBoundary mini>
-      <FluidGrid>
-        <FocusTabs />
+      <FluidPanel title={<SmallMarginFocusTabs />}>
         <FocusArea />
-      </FluidGrid>
+      </FluidPanel>
     </ErrorBoundary>
   );
 
   const sidebarArea = (
     <ErrorBoundary mini>
-      <FluidGrid>
-        <SideTabs />
+      <FluidPanel title={<SmallMarginSideTabs />}>
         <SidebarArea />
-      </FluidGrid>
+      </FluidPanel>
     </ErrorBoundary>
   );
 
@@ -169,12 +167,18 @@ const BodyContent = styled('main')`
   width: 100%;
   height: 100%;
   display: grid;
-  gap: ${space(2)};
   grid-template-rows: auto 1fr;
   overflow: hidden;
   padding: ${space(2)};
 `;
 
+const SmallMarginFocusTabs = styled(FocusTabs)`
+  margin-bottom: ${space(1)};
+`;
+const SmallMarginSideTabs = styled(SideTabs)`
+  margin-bottom: ${space(1)};
+`;
+
 const VideoSection = styled(FluidHeight)`
   background: ${p => p.theme.background};
   gap: ${space(1)};

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

@@ -11,7 +11,6 @@ import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useResizableDrawer} from 'sentry/utils/useResizableDrawer';
 import useUrlParams from 'sentry/utils/useUrlParams';
-import FluidGrid from 'sentry/views/replays/detail/layout/fluidGrid';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
 import NetworkDetails from 'sentry/views/replays/detail/network/details';
 import {ReqRespBodiesAlert} from 'sentry/views/replays/detail/network/details/onboarding';
@@ -173,7 +172,7 @@ function NetworkList({
   };
 
   return (
-    <FluidGrid>
+    <FluidHeight>
       <NetworkFilters networkSpans={networkSpans} {...filterProps} />
       <Feature
         features={['session-replay-network-details']}
@@ -251,7 +250,7 @@ function NetworkList({
           </Feature>
         </SplitPanel>
       </NetworkTable>
-    </FluidGrid>
+    </FluidHeight>
   );
 }
 

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

@@ -11,7 +11,7 @@ import ReplayTagsTableRow from 'sentry/components/replays/replayTagsTableRow';
 import {t} from 'sentry/locale';
 import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
+import FluidPanel from 'sentry/views/replays/detail/layout/fluidPanel';
 
 const notTags = [
   'browser.name',
@@ -61,7 +61,7 @@ function TagPanel() {
 
   return (
     <Panel>
-      <OverflowFluidHeight>
+      <FluidPanel>
         {tags.length ? (
           <KeyValueTable noMargin>
             {tags.map(([key, values]) => (
@@ -76,7 +76,7 @@ function TagPanel() {
         ) : (
           <EmptyMessage>{t('No tags for this replay were found.')}</EmptyMessage>
         )}
-      </OverflowFluidHeight>
+      </FluidPanel>
     </Panel>
   );
 }
@@ -88,8 +88,4 @@ const Panel = styled(BasePanel)`
   margin-bottom: 0;
 `;
 
-const OverflowFluidHeight = styled(FluidHeight)`
-  overflow: auto;
-`;
-
 export default TagPanel;