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/objects/components/SettingsObjectCoverImage.tsx

@@ -6,12 +6,12 @@ import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { IconEye } from 'twenty-ui/display';
 import { FloatingButton } from 'twenty-ui/input';
-import { Card } from 'twenty-ui/layout';
 
 import DarkCoverImage from '@/settings/data-model/assets/cover-dark.png';
 import LightCoverImage from '@/settings/data-model/assets/cover-light.png';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
-const StyledCoverImageContainer = styled(Card)`
+
+const StyledCoverImageContainer = styled.div`
   align-items: center;
   background-size: cover;
   border-radius: ${themeCssVariables.border.radius.md};

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx

@@ -95,14 +95,16 @@ const StyledBannerText = styled.span`
   flex: 1;
 `;
 
-const StyledConflictButton = styled(Button)`
-  border-color: ${themeCssVariables.color.blue};
-  color: ${themeCssVariables.color.blue};
-  &:hover {
-    background: ${themeCssVariables.accent.secondary};
-  }
-  &:focus-visible {
-    box-shadow: 0 0 0 3px ${themeCssVariables.accent.tertiary};
+const StyledConflictButtonContainer = styled.div`
+  > button {
+    border-color: ${themeCssVariables.color.blue};
+    color: ${themeCssVariables.color.blue};
+    &:hover {
+      background: ${themeCssVariables.accent.secondary};
+    }
+    &:focus-visible {
+      box-shadow: 0 0 0 3px ${themeCssVariables.accent.tertiary};
+    }
   }
 `;
 
@@ -281,18 +283,20 @@ export const SettingsDataModelObjectAboutForm = ({
                     {t`An object with this name already exists`}
                   </StyledBannerText>
                 </StyledBannerContent>
-                <StyledConflictButton
-                  size="small"
-                  variant="secondary"
-                  accent="blue"
-                  title={t`Open`}
-                  onClick={() =>
-                    navigateSettings(SettingsPath.ObjectDetail, {
-                      objectNamePlural:
-                        conflictingObjectMetadataItem.namePlural,
-                    })
-                  }
-                />
+                <StyledConflictButtonContainer>
+                  <Button
+                    size="small"
+                    variant="secondary"
+                    accent="blue"
+                    title={t`Open`}
+                    onClick={() =>
+                      navigateSettings(SettingsPath.ObjectDetail, {
+                        objectNamePlural:
+                          conflictingObjectMetadataItem.namePlural,
+                      })
+                    }
+                  />
+                </StyledConflictButtonContainer>
               </StyledConflictBanner>
             )}
             {[

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx

@@ -15,18 +15,25 @@ type SettingsDataModelObjectSettingsFormCardProps = {
   objectMetadataItem: ObjectMetadataItem;
 };
 
-const StyledTopCardContent = styled(CardContent)`
-  background-color: ${themeCssVariables.background.transparent.lighter};
+const StyledTopCardContentContainer = styled.div`
+  > * {
+    background-color: ${themeCssVariables.background.transparent.lighter};
+  }
 `;
 
-const StyledObjectSummaryCard = styled(Card)`
-  border-radius: ${themeCssVariables.border.radius.md};
-  color: ${themeCssVariables.font.color.primary};
+const StyledObjectSummaryCardContainer = styled.div`
   max-width: 480px;
+
+  > * {
+    border-radius: ${themeCssVariables.border.radius.md};
+    color: ${themeCssVariables.font.color.primary};
+  }
 `;
 
-const StyledObjectSummaryCardContent = styled(CardContent)`
-  padding: ${themeCssVariables.spacing[2]};
+const StyledObjectSummaryCardContentContainer = styled.div`
+  > * {
+    padding: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 export const SettingsDataModelObjectSettingsFormCard = ({
@@ -42,26 +49,32 @@ export const SettingsDataModelObjectSettingsFormCard = ({
 
   return (
     <Card fullWidth>
-      <StyledTopCardContent divider>
-        <SettingsDataModelCardTitle>
-          <Trans>Preview</Trans>
-        </SettingsDataModelCardTitle>
-        {labelIdentifierFieldMetadataItem ? (
-          <SettingsDataModelFieldPreviewWidget
-            objectNameSingular={objectMetadataItem.nameSingular}
-            fieldMetadataItem={labelIdentifierFieldMetadataItem}
-            withFieldLabel={false}
-          />
-        ) : (
-          <StyledObjectSummaryCard>
-            <StyledObjectSummaryCardContent>
-              <SettingsDataModelObjectPreview
-                objectMetadataItems={[objectMetadataItem]}
-              />
-            </StyledObjectSummaryCardContent>
-          </StyledObjectSummaryCard>
-        )}
-      </StyledTopCardContent>
+      <StyledTopCardContentContainer>
+        <CardContent divider>
+          <SettingsDataModelCardTitle>
+            <Trans>Preview</Trans>
+          </SettingsDataModelCardTitle>
+          {labelIdentifierFieldMetadataItem ? (
+            <SettingsDataModelFieldPreviewWidget
+              objectNameSingular={objectMetadataItem.nameSingular}
+              fieldMetadataItem={labelIdentifierFieldMetadataItem}
+              withFieldLabel={false}
+            />
+          ) : (
+            <StyledObjectSummaryCardContainer>
+              <Card>
+                <StyledObjectSummaryCardContentContainer>
+                  <CardContent>
+                    <SettingsDataModelObjectPreview
+                      objectMetadataItems={[objectMetadataItem]}
+                    />
+                  </CardContent>
+                </StyledObjectSummaryCardContentContainer>
+              </Card>
+            </StyledObjectSummaryCardContainer>
+          )}
+        </CardContent>
+      </StyledTopCardContentContainer>
       <CardContent>
         <SettingsDataModelObjectIdentifiersForm
           objectMetadataItem={objectMetadataItem}