Remove all styled(Component) patterns in favor of parent wrappers and props (#18430)

## Summary

Eliminates all ~350 `styled(Component)` usages across `twenty-front` and
`twenty-ui` (212 files changed). Each was replaced following these
rules:

- **Margin/layout CSS** (margin, padding, flex, align-self, width) →
wrapped in a `styled.div`/`styled.span` parent container
- **Third-party components** (Link, TextareaAutosize,
ReactPhoneNumberInput, Handle, etc.) → parent container with child CSS
selectors (`> a`, `> textarea`, `> input`, etc.)
- **Intrinsic behavior via existing props** (TableRow
`gridTemplateColumns`, TableCell `color`/`align`) → replaced
`styled(TableRow)` / `styled(TableCell)` with direct prop usage
- **Other visual overrides on twenty-ui components** (Card, Section,
TabList, Button, MenuItem, ScrollWrapper, etc.) → parent wrappers with
`> div` / `> *` child selectors
- **Extending styled.div/span** → merged all CSS into a single
`styled.div`/`styled.span`

Also adds `overflow: hidden` to parent containers wrapping
`ScrollWrapper` so scroll activates correctly with the new wrapper
structure.

### Migration patterns

| Before | After |
|--------|-------|
| `styled(Avatar)` with `margin-right` | `<StyledAvatarContainer><Avatar
/></StyledAvatarContainer>` |
| `styled(Link)` with `text-decoration: none` |
`<StyledLinkContainer><Link /></StyledLinkContainer>` with `> a { ... }`
|
| `styled(TableRow)` with `grid-template-columns` | `<TableRow
gridTemplateColumns="..." />` |
| `styled(TableCell)` with `color` / `align` | `<TableCell color={...}
align="right" />` |
| `styled(Card)` with `margin-top` | `<StyledCardContainer><Card
/></StyledCardContainer>` |
| `styled(TabList)` with `background` |
`<StyledTabListContainer><TabList /></StyledTabListContainer>` with `>
div { ... }` |
| `styled(StyledBase)` extending a `styled.div` | Single merged
`styled.div` with all styles inlined |

packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx

@@ -28,8 +28,10 @@ const StyledButtonContainer = styled.div`
   width: 100%;
 `;
 
-const StyledDownChevron = styled(IconChevronDown)`
+const StyledDownChevronContainer = styled.span`
+  align-items: center;
   color: ${themeCssVariables.font.color.primary};
+  display: flex;
   position: absolute;
   right: ${themeCssVariables.spacing['1.5']};
   top: 50%;
@@ -45,9 +47,11 @@ const StyledSpan = styled.span`
   margin-left: ${themeCssVariables.spacing[2]};
 `;
 
-const StyledButton = styled(Button)`
-  color: ${themeCssVariables.font.color.primary};
-  padding-right: ${themeCssVariables.spacing[6]};
+const StyledButtonWrapper = styled.div`
+  > button {
+    color: ${themeCssVariables.font.color.primary};
+    padding-right: ${themeCssVariables.spacing[6]};
+  }
 `;
 
 export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
@@ -87,11 +91,17 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
         dropdownId={dropdownId}
         clickableComponent={
           <StyledButtonContainer>
-            <StyledDownChevron size={theme.icon.size.md} />
+            <StyledDownChevronContainer>
+              <IconChevronDown size={theme.icon.size.md} />
+            </StyledDownChevronContainer>
             {isConfigureStep ? (
-              <StyledButton variant="tertiary" title={t`2. Configure`} />
+              <StyledButtonWrapper>
+                <Button variant="tertiary" title={t`2. Configure`} />
+              </StyledButtonWrapper>
             ) : (
-              <StyledButton variant="tertiary" title={t`1. Type`} />
+              <StyledButtonWrapper>
+                <Button variant="tertiary" title={t`1. Type`} />
+              </StyledButtonWrapper>
             )}
           </StyledButtonContainer>
         }

packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx

@@ -13,12 +13,16 @@ type SettingsDataModelPreviewFormCardProps = {
   disabled?: boolean;
 };
 
-const StyledPreviewContainer = styled(CardContent)`
-  background-color: ${themeCssVariables.background.transparent.lighter};
+const StyledPreviewContainerWrapper = styled.div`
+  > * {
+    background-color: ${themeCssVariables.background.transparent.lighter};
+  }
 `;
 
-const StyledFormContainer = styled(CardContent)`
-  padding: 0;
+const StyledFormContainerWrapper = styled.div`
+  > * {
+    padding: 0;
+  }
 `;
 
 export const SettingsDataModelPreviewFormCard = ({
@@ -27,12 +31,18 @@ export const SettingsDataModelPreviewFormCard = ({
   form,
 }: SettingsDataModelPreviewFormCardProps) => (
   <Card className={className} fullWidth rounded>
-    <StyledPreviewContainer divider={!!form}>
-      <StyledFormCardTitle>
-        <Trans>Preview</Trans>
-      </StyledFormCardTitle>
-      {preview}
-    </StyledPreviewContainer>
-    {!!form && <StyledFormContainer>{form}</StyledFormContainer>}
+    <StyledPreviewContainerWrapper>
+      <CardContent divider={!!form}>
+        <StyledFormCardTitle>
+          <Trans>Preview</Trans>
+        </StyledFormCardTitle>
+        {preview}
+      </CardContent>
+    </StyledPreviewContainerWrapper>
+    {!!form && (
+      <StyledFormContainerWrapper>
+        <CardContent>{form}</CardContent>
+      </StyledFormContainerWrapper>
+    )}
   </Card>
 );