ref(replay): Remove FluidPanel abstraction (#95150)

This was used in only 2 places, and not fulling in each place. So it's
better to inline the bits that are working, and in the case of the Tags
panel we can chop out some redundant stuff.

Author: ryan953

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

@@ -10,7 +10,6 @@ import useReplayLayout, {LayoutKey} from 'sentry/utils/replays/hooks/useReplayLa
 import {useDimensions} from 'sentry/utils/useDimensions';
 import useFullscreen from 'sentry/utils/window/useFullscreen';
 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 SplitPanel from 'sentry/views/replays/detail/layout/splitPanel';
@@ -74,11 +73,14 @@ export default function ReplayLayout({
     isLoading || replayRecord?.is_archived ? (
       <Placeholder width="100%" height="100%" />
     ) : (
-      <FluidPanel title={<FocusTabs isVideoReplay={isVideoReplay} />}>
-        <ErrorBoundary mini>
-          <FocusArea isVideoReplay={isVideoReplay} />
-        </ErrorBoundary>
-      </FluidPanel>
+      <FluidContainer>
+        <FocusTabs isVideoReplay={isVideoReplay} />
+        <OverflowBody>
+          <ErrorBoundary mini>
+            <FocusArea isVideoReplay={isVideoReplay} />
+          </ErrorBoundary>
+        </OverflowBody>
+      </FluidContainer>
     );
 
   const hasSize = width + height > 0;
@@ -139,6 +141,17 @@ export default function ReplayLayout({
   );
 }
 
+const FluidContainer = styled('section')`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const OverflowBody = styled('div')`
+  flex: 1 1 auto;
+  overflow: auto;
+`;
+
 const BodyContent = styled('main')`
   background: ${p => p.theme.background};
   width: 100%;

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

@@ -12,7 +12,6 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useOrganization from 'sentry/utils/useOrganization';
 import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
-import {FluidPanel} from 'sentry/views/replays/detail/layout/fluidPanel';
 import TabItemContainer from 'sentry/views/replays/detail/tabItemContainer';
 import TagFilters from 'sentry/views/replays/detail/tagPanel/tagFilters';
 import useTagFilters from 'sentry/views/replays/detail/tagPanel/useTagFilters';
@@ -77,24 +76,22 @@ export default function TagPanel() {
       <PaddedFluidHeight>
         <TagFilters tags={tags} {...filterProps} />
         <TabItemContainer>
-          <StyledPanel>
-            <FluidPanel>
-              {filteredTags.length ? (
-                <KeyValueTable noMargin>
-                  {filteredTags.map(([key, values]) => (
-                    <ReplayTagsTableRow
-                      key={key}
-                      name={key}
-                      values={values}
-                      generateUrl={key.includes('sdk.replay.') ? undefined : generateUrl}
-                    />
-                  ))}
-                </KeyValueTable>
-              ) : (
-                <EmptyMessage>{t('No tags for this replay were found.')}</EmptyMessage>
-              )}
-            </FluidPanel>
-          </StyledPanel>
+          <OverflowBody>
+            {filteredTags.length ? (
+              <KeyValueTable noMargin>
+                {filteredTags.map(([key, values]) => (
+                  <ReplayTagsTableRow
+                    key={key}
+                    name={key}
+                    values={values}
+                    generateUrl={key.includes('sdk.replay.') ? undefined : generateUrl}
+                  />
+                ))}
+              </KeyValueTable>
+            ) : (
+              <EmptyMessage>{t('No tags for this replay were found.')}</EmptyMessage>
+            )}
+          </OverflowBody>
         </TabItemContainer>
       </PaddedFluidHeight>
     </ErrorBoundary>
@@ -109,9 +106,7 @@ const PaddedFluidHeight = styled(FluidHeight)`
   padding-top: ${space(1)};
 `;
 
-const StyledPanel = styled('div')`
-  position: relative;
-  height: 100%;
+const OverflowBody = styled('section')`
+  flex: 1 1 auto;
   overflow: auto;
-  display: grid;
 `;