ref(container) run codemod on orphaned components #107039

JonasBa · 2026-01-27T04:11:49Z

Run flex and container codemod on orphaned components

static/app/components/scoreCard.tsx

static/app/views/nav/secondary/secondary.tsx

static/app/components/events/eventBreadcrumbsSection.tsx

static/app/views/nav/projectIcon.tsx

static/app/components/customResolutionModal.tsx

static/app/components/roleSelectControl.tsx

Fixes three issues introduced by the Container codemod: 1. keyValueData/index.tsx: Renamed imported Container to LayoutContainer to avoid naming conflict with local Container component 2. timeline/index.tsx: Renamed imported Container to LayoutContainer to avoid naming conflict with local styled Container component 3. scoreCard.tsx: Converted ScoreWrapper back to a styled component to allow styled-component interpolation in other files (projectCard.tsx)

Addresses issues from Cursor Bugbot review where the Container codemod lost important styling properties: - ScoreWrapper: Use Flex with align="baseline" and maxWidth="100%" - SectionSeparator: Add display="none" for proper CSS override behavior - SearchWrapper: Add container query to hide at 500px width - IconContainer: Use Grid component for proper layout - PlaceholderLink: Add display="inline-block" for minHeight to work - Details span: Add display="inline-block" for width to work

cursor · 2026-01-27T17:01:25Z

static/app/components/scoreCard.tsx


 export const ScoreWrapper = styled((props: FlexProps<'div'>) => {
-  return <Flex align="baseline" maxWidth="100%" {...props} />;
+  return <Flex {...props} align="baseline" maxWidth="100%" />;


Props ordering change breaks consumer overrides

Medium Severity

The prop ordering in ScoreWrapper was reversed, changing from <Flex align="baseline" maxWidth="100%" {...props} /> to <Flex {...props} align="baseline" maxWidth="100%" />. This prevents consumers from overriding align or maxWidth via props, whereas previously they could. This is also inconsistent with other similar changes in this PR (e.g., sidebarSection.tsx, layouts/thirds.tsx) where spread props come last to allow overrides.

@cursoragent swap the order

Taking a look!

JonasBa · 2026-01-27T18:02:15Z

static/app/components/activity/item/index.tsx

      <StyledActivityBubble {...bubbleProps}>
        {header && (
          <ActivityHeader>
-            <ActivityHeaderContent>{header}</ActivityHeaderContent>


@cursoragent use flex={1} here

Taking a look!

JonasBa · 2026-01-27T18:03:54Z

static/app/components/searchQueryBuilder/askSeerCombobox/askSeerPollingComboBox.tsx

        >
          {showLoading ? (
-            <SeerContent>
+            <Stack flex="1">


@cursoragent use flex={1} in the instances in this file

Taking a look!

JonasBa · 2026-01-27T18:05:27Z

static/app/views/projects/redirectDeprecatedProjectRoute.tsx


    return (
-      <Wrapper>
+      <Container flex="1" padding="2xl">


@cursoragent use flex={1}

Taking a look!

Co-authored-by: jonas.badalic <jonas.badalic@sentry.io>

JonasBa · 2026-01-27T18:05:38Z

static/app/views/pullRequest/details/main/pullRequestDetailsSizeContent.tsx

        <Flex align="center" gap="md">
          <Heading as="h2">{t('Builds (%s)', buildDetails.length)}</Heading>
-          <SelectContainer>
+          <Container flex="1" maxWidth="300px">


@cursoragent use flex={1}

Taking a look!

JonasBa · 2026-01-27T18:05:57Z

static/app/views/settings/account/accountSecurity/sessionHistory/sessionRow.tsx

  return (
    <SessionPanelItem>
-      <IpAndLocation>
+      <Container flex="1">


@cursoragent use flex={1]

Taking a look!

JonasBa · 2026-01-27T18:06:09Z

static/app/views/settings/account/accountNotificationFineTuning.tsx

            </Fragment>
          ) : (
-            <Heading>{t('Organizations')}</Heading>
+            <Container flex="1">{t('Organizations')}</Container>


JonasBa · 2026-01-27T18:06:25Z

static/app/views/settings/components/settingsPageHeader.tsx


-      {body && <BodyWrapper>{body}</BodyWrapper>}
+      {body && (
+        <Container flex="1" margin="0 0 2xl">


@cursoragent use flex={1}

Taking a look!

cursor

Cursor Bugbot has reviewed your changes and found 4 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

cursor · 2026-01-27T18:14:11Z

static/app/components/activity/item/index.tsx

        {header && (
          <ActivityHeader>
-            <ActivityHeaderContent>{header}</ActivityHeaderContent>
+            <Container flex="1">{header}</Container>


String "1" used instead of number for flex prop

Medium Severity

The codemod converted flex: 1 CSS to flex="1" (string) instead of flex={1} (number) in multiple locations. This affects Container and Stack components where the flex prop expects a number. The string value may cause incorrect flex behavior depending on how the component processes the prop. This occurs in index.tsx, askSeerPollingComboBox.tsx (5 instances), redirectDeprecatedProjectRoute.tsx, pullRequestDetailsSizeContent.tsx, and feedbackModal.tsx.

Additional Locations (2)

static/app/components/searchQueryBuilder/askSeerCombobox/askSeerPollingComboBox.tsx#L493-L525

static/app/views/projects/redirectDeprecatedProjectRoute.tsx#L136-L137

cursor · 2026-01-27T18:14:11Z

static/app/views/settings/account/accountNotificationFineTuning.tsx

            </Fragment>
          ) : (
-            <Heading>{t('Organizations')}</Heading>
+            <Container flex="1">{t('Organizations')}</Container>


Additional flex="1" instances missed in settings files

Medium Severity

Additional instances of flex="1" (string) instead of flex={1} (number) were introduced in settings-related files. In accountNotificationFineTuning.tsx, sessionRow.tsx, and settingsPageHeader.tsx (two instances at lines 54 and 67), the codemod incorrectly converted the CSS flex: 1 to a string prop instead of a numeric prop. These follow the same pattern as previously reported but were in different files.

Additional Locations (2)

static/app/views/settings/account/accountSecurity/sessionHistory/sessionRow.tsx#L20-L21

static/app/views/settings/components/settingsPageHeader.tsx#L53-L67

cursor · 2026-01-27T18:14:11Z

static/app/components/searchQueryBuilder/askSeerCombobox/queryTokens.tsx

+            <Container as="span" key={text}>
              <ProvidedFormattedQuery query={text} />
-            </FormattedQueryWrapper>
+            </Container>


Missing display inline-block style in queryTokens conversion

Low Severity

The FormattedQueryWrapper styled component originally had display: inline-block, but the replacement Container as="span" doesn't preserve this styling. A span defaults to display: inline, which behaves differently from inline-block for box model properties like width, height, and vertical margin/padding. This could cause visual regression in how the formatted query tokens are rendered.

cursor · 2026-01-27T18:14:11Z

static/app/components/sidebarSection.tsx

-`;
+export function Content(props: ContainerProps<'div'>) {
+  return <Container marginTop="md" {...props} />;
+}


Styled extensions of converted components now create nested structure

Medium Severity

Converting SidebarSection.Wrap and SidebarSection.Content from styled components to function components breaks existing styled() extensions in groupSidebar.tsx and releaseStats.tsx. Previously, styled(SidebarSection.Wrap) would extend and override the base styles in a single element. Now it creates a nested structure where the outer styled wrapper has the override styles but the inner Container still applies its own marginBottom="3xl" or marginTop="md", causing both margins to be present instead of one overriding the other.

Additional Locations (1)

static/app/components/group/releaseStats.tsx#L176-L179

JonasBa added 2 commits January 22, 2026 15:34

ref(container) run codemod on orphaned components

7c7397c

Merge branch 'master' into codemod/flex/orphaned

95f8776

JonasBa requested a review from a team January 27, 2026 04:11

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jan 27, 2026

vercel bot deployed to Preview January 27, 2026 04:13 View deployment

cursor bot reviewed Jan 27, 2026

View reviewed changes

vercel bot deployed to Preview January 27, 2026 16:09 View deployment

vercel bot deployed to Preview January 27, 2026 16:57 View deployment

cursor bot reviewed Jan 27, 2026

View reviewed changes

JonasBa commented Jan 27, 2026

View reviewed changes

fix(scoreCard): restore prop override capability in ScoreWrapper

a3ceef8

Co-authored-by: jonas.badalic <jonas.badalic@sentry.io>

JonasBa commented Jan 27, 2026

View reviewed changes

vercel bot deployed to Preview January 27, 2026 18:08 View deployment

cursor bot reviewed Jan 27, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ref(container) run codemod on orphaned components #107039

ref(container) run codemod on orphaned components #107039

Uh oh!

JonasBa commented Jan 27, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot Jan 27, 2026

JonasBa Jan 27, 2026

cursor bot Jan 27, 2026

JonasBa Jan 27, 2026

cursor bot Jan 27, 2026

JonasBa Jan 27, 2026

cursor bot Jan 27, 2026

JonasBa Jan 27, 2026

cursor bot Jan 27, 2026

JonasBa Jan 27, 2026

cursor bot Jan 27, 2026

JonasBa Jan 27, 2026

cursor bot Jan 27, 2026

JonasBa Jan 27, 2026

JonasBa Jan 27, 2026

cursor bot Jan 27, 2026

cursor bot left a comment

cursor bot Jan 27, 2026

cursor bot Jan 27, 2026

cursor bot Jan 27, 2026

cursor bot Jan 27, 2026

Labels

3 participants

Uh oh!

ref(container) run codemod on orphaned components #107039

Are you sure you want to change the base?

ref(container) run codemod on orphaned components #107039

Uh oh!

Conversation

JonasBa commented Jan 27, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Props ordering change breaks consumer overrides

Choose a reason for hiding this comment

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

cursor bot left a comment

Choose a reason for hiding this comment

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

String "1" used instead of number for flex prop

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Additional flex="1" instances missed in settings files

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Missing display inline-block style in queryTokens conversion

cursor bot Jan 27, 2026

Choose a reason for hiding this comment

Styled extensions of converted components now create nested structure

Labels

3 participants