fix(stacktrace): Fix frame registers not aligning to grid or being truncated by ClippedBox (#60023)

Fixes https://github.com/getsentry/sentry/issues/60013

I believe this regression is due to the refactor of ClippedBox here:
https://github.com/getsentry/sentry/pull/59524

This component was adding a lot of custom behavior to the ClippedBox
component which seemed to break after the refactor. IMO those
customizations did not add enough value to be worth the inconsistency
and additional maintenance.

static/app/components/events/interfaces/frame/frameRegisters/index.tsx

@@ -1,5 +1,3 @@
-import {useState} from 'react';
-import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import ClippedBox from 'sentry/components/clippedBox';
@@ -16,12 +14,9 @@ type Props = {
   meta?: Record<any, any>;
 };
 
-const CLIPPED_HEIGHT = 40;
+const CLIPPED_HEIGHT = 120;
 
 export function FrameRegisters({registers, deviceArch, meta}: Props) {
-  const [isRevealed, setIsRevealed] = useState(false);
-  const [renderedHeight, setRenderedHeight] = useState(0);
-
   // make sure that clicking on the registers does not actually do
   // anything on the containing element.
   const handlePreventToggling = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -32,16 +27,7 @@ export function FrameRegisters({registers, deviceArch, meta}: Props) {
 
   return (
     <Wrapper>
-      <StyledClippedBox
-        isRevealed={isRevealed}
-        renderedHeight={renderedHeight}
-        clipHeight={CLIPPED_HEIGHT}
-        onReveal={() => setIsRevealed(true)}
-        onSetRenderedHeight={setRenderedHeight}
-        clipFade={({showMoreButton}) => {
-          return <ClipFade>{showMoreButton}</ClipFade>;
-        }}
-      >
+      <StyledClippedBox clipHeight={CLIPPED_HEIGHT}>
         <RegistersTitle>{t('Registers')}</RegistersTitle>
         <Registers>
           {sortedRegisters.map(([name, value]) => {
@@ -93,49 +79,6 @@ const Register = styled('div')`
   }
 `;
 
-const StyledClippedBox = styled(ClippedBox)<{
-  isRevealed: boolean;
-  renderedHeight: number;
-}>`
-  margin-left: 0;
-  margin-right: 0;
+const StyledClippedBox = styled(ClippedBox)`
   padding: 0;
-  border-top: 0;
-
-  @media (min-width: ${p => p.theme.breakpoints.small}) {
-    display: flex;
-  }
-
-  ${p =>
-    !p.isRevealed &&
-    p.renderedHeight > CLIPPED_HEIGHT &&
-    css`
-      /* the height of 2 frame rows + button height */
-      max-height: calc(${CLIPPED_HEIGHT * 2}px + 28px);
-
-      @media (min-width: ${p.theme.breakpoints.small}) {
-        /* the height of 1 frame row + button height */
-        max-height: calc(${CLIPPED_HEIGHT}px + 28px);
-      }
-
-      > *:last-child {
-        background: ${p.theme.background};
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        position: absolute;
-      }
-    `}
-`;
-
-const ClipFade = styled('div')`
-  background: ${p => p.theme.background};
-  display: flex;
-  justify-content: flex-end;
-  /* Let pointer-events pass through ClipFade to visible elements underneath it */
-  pointer-events: none;
-  /* Ensure pointer-events trigger event listeners on "Expand" button */
-  > * {
-    pointer-events: auto;
-  }
 `;