fix(perf): Improve SlideOverPanel layout (#69523)

- remove border
- add a nice box shadow
- clarify how the positioning is done
- prevent unnecessary scrollbars

Author: gggritso

static/app/views/starfish/components/slideOverPanel.tsx

@@ -1,15 +1,20 @@
 import type {ForwardedRef} from 'react';
 import {forwardRef, useEffect} from 'react';
 import isPropValid from '@emotion/is-prop-valid';
+import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import {motion} from 'framer-motion';
 
+import {space} from 'sentry/styles/space';
+
 const PANEL_WIDTH = '50vw';
 const PANEL_HEIGHT = '50vh';
+
 const INITIAL_STYLES = {
   bottom: {opacity: 0, x: 0, y: 0},
   right: {opacity: 0, x: PANEL_WIDTH, y: 0},
 };
+
 const FINAL_STYLES = {
   bottom: {opacity: 0, x: 0, y: PANEL_HEIGHT},
   right: {opacity: 0, x: PANEL_WIDTH},
@@ -35,6 +40,7 @@ function SlideOverPanel(
   }, [collapsed, onOpen]);
   const initial = slidePosition ? INITIAL_STYLES[slidePosition] : INITIAL_STYLES.right;
   const final = slidePosition ? FINAL_STYLES[slidePosition] : FINAL_STYLES.right;
+
   return (
     <_SlideOverPanel
       ref={ref}
@@ -61,30 +67,56 @@ const _SlideOverPanel = styled(motion.div, {
   collapsed: boolean;
   slidePosition?: 'right' | 'bottom';
 }>`
-  ${p =>
-    p.slidePosition === 'bottom'
-      ? `
-      width: 100%;
-      height: ${PANEL_HEIGHT};
-      position: sticky;
-      border-top: 1px solid ${p.theme.border};
-    `
-      : `
-      width: ${PANEL_WIDTH};
-      height: 100%;
-      position: fixed;
-      top: 0;
-      border-left: 1px solid ${p.theme.border};
-    `}
-  bottom: 0;
+  position: fixed;
+
+  top: ${space(2)};
   right: 0;
+  bottom: ${space(2)};
+  left: ${space(2)};
+
+  overflow: auto;
+
+  z-index: ${p => p.theme.zIndex.modal + 1};
+
+  box-shadow: ${p => p.theme.dropShadowHeavy};
   background: ${p => p.theme.background};
   color: ${p => p.theme.textColor};
+
   text-align: left;
-  z-index: ${p => p.theme.zIndex.sidebar - 1};
+
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
+    ${p =>
+      p.slidePosition === 'bottom'
+        ? css`
+            position: sticky;
+
+            width: 100%;
+            height: ${PANEL_HEIGHT};
+
+            right: 0;
+            bottom: 0;
+            left: 0;
+          `
+        : css`
+            position: fixed;
+
+            width: ${PANEL_WIDTH};
+            height: 100%;
+
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: auto;
+          `}
+  }
+
   ${p =>
     p.collapsed
-      ? 'overflow: hidden;'
-      : `overflow-x: hidden;
-  overflow-y: scroll;`}
+      ? css`
+          overflow: hidden;
+        `
+      : css`
+          overflow-x: hidden;
+          overflow-y: auto;
+        `}
 `;