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/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx

@@ -1,34 +1,21 @@
-import { styled } from '@linaria/react';
-
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { Checkbox } from 'twenty-ui/input';
 import { useIcons } from 'twenty-ui/display';
+import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
+export const AVAILABLE_STANDARD_OBJECTS_GRID_TEMPLATE_COLUMNS =
+  '28px 148px 256px 80px';
+
 type SettingsAvailableStandardObjectItemTableRowProps = {
   isSelected?: boolean;
   objectItem: ObjectMetadataItem;
   onClick?: () => void;
 };
 
-export const StyledAvailableStandardObjectTableRow = styled(TableRow)`
-  grid-template-columns: 28px 148px 256px 80px;
-`;
-
-const StyledCheckboxTableCell = styled(TableCell)`
-  justify-content: center;
-  padding: 0;
-  padding-left: ${themeCssVariables.spacing[1]};
-`;
-
-const StyledNameTableCell = styled(TableCell)`
-  color: ${themeCssVariables.font.color.primary};
-  gap: ${themeCssVariables.spacing[2]};
-`;
-
 const StyledDescription = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
@@ -45,22 +32,29 @@ export const SettingsAvailableStandardObjectItemTableRow = ({
   const Icon = getIcon(objectItem.icon);
 
   return (
-    <StyledAvailableStandardObjectTableRow
+    <TableRow
+      gridTemplateColumns={AVAILABLE_STANDARD_OBJECTS_GRID_TEMPLATE_COLUMNS}
       key={objectItem.namePlural}
       isSelected={isSelected}
       onClick={onClick}
     >
-      <StyledCheckboxTableCell>
+      <TableCell
+        align="center"
+        padding={`0 0 0 ${themeCssVariables.spacing[1]}`}
+      >
         <Checkbox checked={!!isSelected} />
-      </StyledCheckboxTableCell>
-      <StyledNameTableCell>
+      </TableCell>
+      <TableCell
+        color={themeCssVariables.font.color.primary}
+        gap={themeCssVariables.spacing[2]}
+      >
         {!!Icon && <Icon size={theme.icon.size.md} />}
         {objectItem.labelPlural}
-      </StyledNameTableCell>
+      </TableCell>
       <TableCell>
         <StyledDescription>{objectItem.description}</StyledDescription>
       </TableCell>
       <TableCell align="right">{objectItem.fields.length}</TableCell>
-    </StyledAvailableStandardObjectTableRow>
+    </TableRow>
   );
 };

packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectsSection.tsx

@@ -6,9 +6,10 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { t } from '@lingui/core/macro';
 import { H2Title } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
 import {
+  AVAILABLE_STANDARD_OBJECTS_GRID_TEMPLATE_COLUMNS,
   SettingsAvailableStandardObjectItemTableRow,
-  StyledAvailableStandardObjectTableRow,
 } from './SettingsAvailableStandardObjectItemTableRow';
 
 type SettingsAvailableStandardObjectsSectionProps = {
@@ -28,12 +29,14 @@ export const SettingsAvailableStandardObjectsSection = ({
       description={t`Select one or several standard objects to activate below`}
     />
     <Table>
-      <StyledAvailableStandardObjectTableRow>
+      <TableRow
+        gridTemplateColumns={AVAILABLE_STANDARD_OBJECTS_GRID_TEMPLATE_COLUMNS}
+      >
         <TableHeader></TableHeader>
         <TableHeader>{t`Name`}</TableHeader>
         <TableHeader>{t`Description`}</TableHeader>
         <TableHeader align="right">{t`Fields`}</TableHeader>
-      </StyledAvailableStandardObjectTableRow>
+      </TableRow>
       <TableBody>
         {objectItems.map((objectItem) => (
           <SettingsAvailableStandardObjectItemTableRow