ref(flex) run codemod on orphaned files

static/app/components/carousel.tsx

@@ -2,6 +2,7 @@ import {useCallback, useRef} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from '@sentry/scraps/button';
+import {Container} from '@sentry/scraps/layout';
 
 import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -55,7 +56,7 @@ export function Carousel({children, visibleRatio = 0.8}: CarouselProps) {
   );
 
   return (
-    <CarouselContainer>
+    <Container margin="2xs" position="relative">
       <CarouselItems ref={scrollContainerRef}>{children}</CarouselItems>
       {!isAtStart && (
         <StyledArrowButton
@@ -73,18 +74,10 @@ export function Carousel({children, visibleRatio = 0.8}: CarouselProps) {
           icon={<IconArrow direction="right" />}
         />
       )}
-    </CarouselContainer>
+    </Container>
   );
 }
 
-const CarouselContainer = styled('div')`
-  position: relative;
-  /* We provide some margin to make room for the scroll bar. It is applied on
-   * the top and bottom for consistency.
-   */
-  margin: ${p => p.theme.space['2xs']};
-`;
-
 const CarouselItems = styled('div')`
   display: flex;
   overflow-x: scroll;

static/app/components/checkInTimeline/checkInTimeline.tsx

@@ -1,6 +1,7 @@
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {Container} from '@sentry/scraps/layout';
 import {Tooltip, type TooltipProps} from '@sentry/scraps/tooltip';
 
 import {DateTime} from 'sentry/components/dateTime';
@@ -70,7 +71,15 @@ export function CheckInTimeline<Status extends string>({
   );
 
   return (
-    <TimelineContainer role="figure" className={className} style={style}>
+    <Container
+      width="100%"
+      height="14px"
+      overflow="hidden"
+      position="relative"
+      role="figure"
+      className={className}
+      style={style}
+    >
       {jobTicks.map(jobTick => {
         const {left, startTs, width, stats, isStarting, isEnding} = jobTick;
 
@@ -97,7 +106,7 @@ export function CheckInTimeline<Status extends string>({
           </CheckInTooltip>
         );
       })}
-    </TimelineContainer>
+    </Container>
   );
 }
 
@@ -131,7 +140,7 @@ export function MockCheckInTimeline<Status extends string>({
   const startOffset = rollupConfig.timelineUnderscanWidth;
 
   return (
-    <TimelineContainer>
+    <Container width="100%" height="14px" overflow="hidden" position="relative">
       {mockTimestamps.map(ts => {
         const timestampMs = ts.getTime();
         const left =
@@ -155,17 +164,10 @@ export function MockCheckInTimeline<Status extends string>({
           </Tooltip>
         );
       })}
-    </TimelineContainer>
+    </Container>
   );
 }
 
-const TimelineContainer = styled('div')`
-  position: relative;
-  height: 14px;
-  width: 100%;
-  overflow: hidden;
-`;
-
 const JobTick = styled('div')<{
   roundedLeft: boolean;
   roundedRight: boolean;

static/app/components/checkInTimeline/gridLines.tsx

@@ -4,6 +4,8 @@ import styled from '@emotion/styled';
 import {mergeRefs} from '@react-aria/utils';
 import moment from 'moment-timezone';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {DateTime} from 'sentry/components/dateTime';
 import {updateDateTime} from 'sentry/components/pageFilters/actions';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -284,21 +286,22 @@ export function GridLineOverlay({
   const overlayRef = mergeRefs(cursorContainerRef, selectionContainerRef);
 
   return (
-    <Overlay aria-hidden ref={overlayRef} className={className}>
+    <Container
+      width="100%"
+      height="100%"
+      position="absolute"
+      aria-hidden
+      ref={overlayRef}
+      className={className}
+    >
       {timelineCursor}
       {timelineSelector}
       {additionalUi}
       <GridLines timeWindowConfig={timeWindowConfig} labelPosition={labelPosition} />
-    </Overlay>
+    </Container>
   );
 }
 
-const Overlay = styled('div')`
-  height: 100%;
-  width: 100%;
-  position: absolute;
-`;
-
 const GridLineContainer = styled('div')`
   position: relative;
   overflow: hidden;

static/app/components/contentSliderDiff/index.tsx

@@ -1,6 +1,8 @@
 import {useRef, type CSSProperties} from 'react';
 import styled from '@emotion/styled';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {NegativeSpaceContainer} from 'sentry/components/container/negativeSpaceContainer';
 import {IconGrabbable} from 'sentry/icons';
 import {useDimensions} from 'sentry/utils/useDimensions';
@@ -35,7 +37,13 @@ function Body({onDragHandleMouseDown, after, before, minHeight = '0px'}: Props)
 
   return (
     <OverflowVisibleContainer>
-      <Positioned style={{minHeight}} ref={positionedRef}>
+      <Container
+        width="100%"
+        height="100%"
+        position="relative"
+        minHeight={typeof minHeight === 'number' ? `${minHeight}px` : minHeight}
+        ref={positionedRef}
+      >
         {viewDimensions.width ? (
           <Sides
             viewDimensions={viewDimensions}
@@ -46,7 +54,7 @@ function Body({onDragHandleMouseDown, after, before, minHeight = '0px'}: Props)
         ) : (
           <div />
         )}
-      </Positioned>
+      </Container>
     </OverflowVisibleContainer>
   );
 }
@@ -157,12 +165,6 @@ const OverflowVisibleContainer = styled(FullHeightContainer)`
   overflow: visible;
 `;
 
-const Positioned = styled('div')`
-  height: 100%;
-  position: relative;
-  width: 100%;
-`;
-
 const SidesContainer = styled('div')`
   position: absolute;
   inset: 0;

static/app/components/customResolutionModal.tsx

@@ -4,7 +4,7 @@ import {useQuery} from '@tanstack/react-query';
 
 import {Button} from '@sentry/scraps/button';
 import {CompactSelect, type SelectOption} from '@sentry/scraps/compactSelect';
-import {Flex} from '@sentry/scraps/layout';
+import {Flex, Container} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
 import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
 
@@ -179,7 +179,7 @@ export function CustomResolutionModal(props: CustomResolutionModalProps) {
           onClose={() => setSearchQuery('')}
         />
         {selectionError ? <ErrorText role="alert">{selectionError}</ErrorText> : null}
-        <ReleaseLinkWrapper>
+        <Container marginTop="md">
           {version ? (
             // Open release in new tab to avoid closing the modal
             <ExternalLink
@@ -196,9 +196,14 @@ export function CustomResolutionModal(props: CustomResolutionModalProps) {
             </ExternalLink>
           ) : (
             // Placeholder to maintain layout when no version is selected
-            <PlaceholderLink aria-hidden="true" />
+            <Container
+              as="span"
+              display="inline-block"
+              minHeight="1.2em"
+              aria-hidden="true"
+            />
           )}
-        </ReleaseLinkWrapper>
+        </Container>
       </Body>
       <Footer>
         <Flex gap="sm" align="center" justify="end">
@@ -220,15 +225,6 @@ const StyledCompactSelect = styled(CompactSelect)`
   }
 `;
 
-const ReleaseLinkWrapper = styled('div')`
-  margin-top: ${p => p.theme.space.md};
-`;
-
-const PlaceholderLink = styled('span')`
-  display: inline-block;
-  min-height: 1.2em;
-`;
-
 const ErrorText = styled('div')`
   color: ${p => p.theme.tokens.content.danger};
   margin-top: ${p => p.theme.space.sm};

static/app/components/discover/transactionsTable.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import type {Location, LocationDescriptor} from 'history';
 
 import {LinkButton} from '@sentry/scraps/button';
+import {Container} from '@sentry/scraps/layout';
 import {Link} from '@sentry/scraps/link';
 
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
@@ -80,7 +81,7 @@ export function TransactionsTable(props: Props) {
 
       if (column.key === 'span_ops_breakdown.relative') {
         return (
-          <HeadCellContainer key={index}>
+          <Container padding="xl" key={index}>
             <SortLink
               align={align}
               title={
@@ -102,14 +103,14 @@ export function TransactionsTable(props: Props) {
               direction={undefined}
               canSort={false}
             />
-          </HeadCellContainer>
+          </Container>
         );
       }
 
       return (
-        <HeadCellContainer key={index}>
+        <Container padding="xl" key={index}>
           <SortLink align={align} title={title} direction={undefined} canSort={false} />
-        </HeadCellContainer>
+        </Container>
       );
     });
 
@@ -258,10 +259,6 @@ function getProfileAnalyticsHandler(organization: Organization, referrer?: strin
   };
 }
 
-const HeadCellContainer = styled('div')`
-  padding: ${p => p.theme.space.xl};
-`;
-
 const BodyCellContainer = styled('div')`
   padding: ${p => p.theme.space.md} ${p => p.theme.space.xl};
   display: block;

static/app/components/eventTitleError.tsx

@@ -1,22 +1,20 @@
 import styled from '@emotion/styled';
 
-import {Flex} from '@sentry/scraps/layout';
+import {Flex, Container} from '@sentry/scraps/layout';
 
 import {t} from 'sentry/locale';
 
 export function EventTitleError() {
   return (
     <Flex as="span" wrap="wrap">
-      <Title>{t('<unknown>')}</Title>
+      <Container as="span" marginRight="xs">
+        {t('<unknown>')}
+      </Container>
       <ErrorMessage>{t('There was an error rendering the title')}</ErrorMessage>
     </Flex>
   );
 }
 
-const Title = styled('span')`
-  margin-right: ${p => p.theme.space.xs};
-`;
-
 const ErrorMessage = styled('span')`
   color: ${p => p.theme.colors.red500};
   background: ${p => p.theme.colors.red100};

static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx

@@ -5,7 +5,7 @@ import {ProjectAvatar} from '@sentry/scraps/avatar';
 import {Button} from '@sentry/scraps/button';
 import {CompactSelect} from '@sentry/scraps/compactSelect';
 import {InputGroup} from '@sentry/scraps/input';
-import {Grid} from '@sentry/scraps/layout';
+import {Grid, Container} from '@sentry/scraps/layout';
 import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
 
 import {BreadcrumbsTimeline} from 'sentry/components/events/breadcrumbs/breadcrumbsTimeline';
@@ -227,7 +227,7 @@ export function BreadcrumbsDrawer({
         {actions}
       </EventNavigator>
       <EventDrawerBody ref={setContainer}>
-        <TimelineContainer>
+        <Container column="span 2">
           {displayCrumbs.length === 0 ? (
             <EmptyMessage>
               {t('No breadcrumbs found.')}
@@ -252,16 +252,12 @@ export function BreadcrumbsDrawer({
               containerElement={container}
             />
           )}
-        </TimelineContainer>
+        </Container>
       </EventDrawerBody>
     </EventDrawerContainer>
   );
 }
 
-const TimelineContainer = styled('div')`
-  grid-column: span 2;
-`;
-
 const EmptyMessage = styled('div')`
   display: flex;
   flex-direction: column;

static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import {useVirtualizer} from '@tanstack/react-virtual';
 import moment from 'moment-timezone';
 
+import {Container} from '@sentry/scraps/layout';
 import {Link} from '@sentry/scraps/link';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
@@ -149,15 +150,15 @@ export function BreadcrumbsTimeline({
         data-index={virtualizedRow.index}
         showLastLine={showLastLine}
       >
-        <ContentWrapper>
+        <Container paddingBottom="md">
           <ErrorBoundary mini>
             <BreadcrumbItemContent
               breadcrumb={breadcrumb}
               meta={meta}
               fullyExpanded={fullyExpanded}
             />
           </ErrorBoundary>
-        </ContentWrapper>
+        </Container>
       </BreadcrumbItem>
     );
   });
@@ -214,10 +215,6 @@ const Timestamp = styled('div')`
   }
 `;
 
-const ContentWrapper = styled('div')`
-  padding-bottom: ${p => p.theme.space.md};
-`;
-
 const BreadcrumbItem = styled(Timeline.Item)`
   border-bottom: 1px solid transparent;
   &:not(:last-child) {