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/admin-panel/ai/components/SettingsAdminAI.tsx

@@ -37,7 +37,7 @@ const StyledSearchAndFilterContainer = styled.div`
   width: 100%;
 `;
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   flex: 1;
 `;
 
@@ -163,13 +163,15 @@ export const SettingsAdminAI = () => {
         />
 
         <StyledSearchAndFilterContainer>
-          <StyledSearchInput
-            instanceId="admin-model-search"
-            LeftIcon={IconSearch}
-            placeholder={t`Search a model...`}
-            value={searchQuery}
-            onChange={setSearchQuery}
-          />
+          <StyledSearchInputContainer>
+            <SettingsTextInput
+              instanceId="admin-model-search"
+              LeftIcon={IconSearch}
+              placeholder={t`Search a model...`}
+              value={searchQuery}
+              onChange={setSearchQuery}
+            />
+          </StyledSearchInputContainer>
           <Dropdown
             dropdownId="admin-ai-models-filter-dropdown"
             dropdownPlacement="bottom-end"

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableSearchInput.tsx

@@ -3,7 +3,7 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { IconSearch } from 'twenty-ui/display';
 
-const StyledSearchInput = styled(SettingsTextInput)`
+const StyledSearchInputContainer = styled.div`
   width: 100%;
 `;
 
@@ -17,13 +17,15 @@ export const ConfigVariableSearchInput = ({
   onChange,
 }: ConfigVariableSearchInputProps) => {
   return (
-    <StyledSearchInput
-      instanceId="config-variable-search"
-      placeholder={t`Search config variables`}
-      value={value}
-      onChange={onChange}
-      autoFocus={false}
-      LeftIcon={IconSearch}
-    />
+    <StyledSearchInputContainer>
+      <SettingsTextInput
+        instanceId="config-variable-search"
+        placeholder={t`Search config variables`}
+        value={value}
+        onChange={onChange}
+        autoFocus={false}
+        LeftIcon={IconSearch}
+      />
+    </StyledSearchInputContainer>
   );
 };

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx

@@ -12,16 +12,11 @@ type SettingsAdminConfigVariablesRowProps = {
   variable: ConfigVariable;
 };
 
-const StyledTruncatedCell = styled(TableCell)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-`;
-
-const StyledTableRow = styled(TableRow)`
-  &:hover {
-    background-color: ${themeCssVariables.background.transparent.light};
+const StyledTableRowContainer = styled.div`
+  > * {
+    &:hover {
+      background-color: ${themeCssVariables.background.transparent.light};
+    }
   }
 `;
 
@@ -48,24 +43,38 @@ export const SettingsAdminConfigVariablesRow = ({
           : variable.value;
 
   return (
-    <StyledTableRow
-      gridAutoColumns="5fr 3fr 1fr"
-      to={getSettingsPath(SettingsPath.AdminPanelConfigVariableDetails, {
-        variableName: variable.name,
-      })}
-    >
-      <StyledTruncatedCell color={theme.font.color.primary}>
-        <StyledEllipsisLabel>{variable.name}</StyledEllipsisLabel>
-      </StyledTruncatedCell>
-      <StyledTruncatedCell align="right">
-        <StyledEllipsisLabel>{displayValue}</StyledEllipsisLabel>
-      </StyledTruncatedCell>
-      <TableCell align="right">
-        <IconChevronRight
-          size={theme.icon.size.md}
-          color={theme.font.color.tertiary}
-        />
-      </TableCell>
-    </StyledTableRow>
+    <StyledTableRowContainer>
+      <TableRow
+        gridAutoColumns="5fr 3fr 1fr"
+        to={getSettingsPath(SettingsPath.AdminPanelConfigVariableDetails, {
+          variableName: variable.name,
+        })}
+      >
+        <TableCell
+          color={theme.font.color.primary}
+          whiteSpace="nowrap"
+          overflow="hidden"
+          textOverflow="ellipsis"
+          clickable
+        >
+          <StyledEllipsisLabel>{variable.name}</StyledEllipsisLabel>
+        </TableCell>
+        <TableCell
+          align="right"
+          whiteSpace="nowrap"
+          overflow="hidden"
+          textOverflow="ellipsis"
+          clickable
+        >
+          <StyledEllipsisLabel>{displayValue}</StyledEllipsisLabel>
+        </TableCell>
+        <TableCell align="right">
+          <IconChevronRight
+            size={theme.icon.size.md}
+            color={theme.font.color.tertiary}
+          />
+        </TableCell>
+      </TableRow>
+    </StyledTableRowContainer>
   );
 };

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesTable.tsx

@@ -8,7 +8,7 @@ import { styled } from '@linaria/react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type ConfigVariable } from '~/generated-metadata/graphql';
 
-const StyledTableBody = styled(TableBody)`
+const StyledTableBodyContainer = styled.div`
   border-bottom: 1px solid ${themeCssVariables.border.color.light};
 `;
 
@@ -26,14 +26,16 @@ export const SettingsAdminConfigVariablesTable = ({
         <TableHeader align="right">{t`Value`}</TableHeader>
         <TableHeader align="right"></TableHeader>
       </TableRow>
-      <StyledTableBody>
-        {variables.map((variable) => (
-          <SettingsAdminConfigVariablesRow
-            key={variable.name}
-            variable={variable}
-          />
-        ))}
-      </StyledTableBody>
+      <StyledTableBodyContainer>
+        <TableBody>
+          {variables.map((variable) => (
+            <SettingsAdminConfigVariablesRow
+              key={variable.name}
+              variable={variable}
+            />
+          ))}
+        </TableBody>
+      </StyledTableBodyContainer>
     </Table>
   );
 };

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx

@@ -5,9 +5,11 @@ import { H2Title } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledSettingsAdminTableCard = styled(SettingsAdminTableCard)`
-  padding-left: ${themeCssVariables.spacing[2]};
-  padding-right: ${themeCssVariables.spacing[2]};
+const StyledSettingsAdminTableCardContainer = styled.div`
+  > * {
+    padding-left: ${themeCssVariables.spacing[2]};
+    padding-right: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 export const SettingsAdminHealthAccountSyncCountersTable = ({
@@ -47,13 +49,15 @@ export const SettingsAdminHealthAccountSyncCountersTable = ({
   return (
     <Section>
       <H2Title title={title} description={description} />
-      <StyledSettingsAdminTableCard
-        items={items}
-        rounded
-        gridAutoColumns="1fr 1fr"
-        labelAlign="left"
-        valueAlign="right"
-      />
+      <StyledSettingsAdminTableCardContainer>
+        <SettingsAdminTableCard
+          items={items}
+          rounded
+          gridAutoColumns="1fr 1fr"
+          labelAlign="left"
+          valueAlign="right"
+        />
+      </StyledSettingsAdminTableCardContainer>
     </Section>
   );
 };

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx

@@ -29,9 +29,11 @@ const StyledNoDataMessage = styled.div`
   justify-content: center;
 `;
 
-const StyledSettingsAdminTableCard = styled(SettingsAdminTableCard)`
-  padding-left: ${themeCssVariables.spacing[2]};
-  padding-right: ${themeCssVariables.spacing[2]};
+const StyledSettingsAdminTableCardContainer = styled.div`
+  > * {
+    padding-left: ${themeCssVariables.spacing[2]};
+    padding-right: ${themeCssVariables.spacing[2]};
+  }
 `;
 
 type SettingsAdminWorkerMetricsGraphProps = {
@@ -200,23 +202,25 @@ export const SettingsAdminWorkerMetricsGraph = ({
         )}
       </StyledGraphContainer>
       {metricsDetails && (
-        <StyledSettingsAdminTableCard
-          rounded
-          items={Object.entries(metricsDetails)
-            .filter(([key]) => key !== '__typename')
-            .map(([key, value]) => ({
-              label: key.charAt(0).toUpperCase() + key.slice(1),
-              value:
-                typeof value === 'number'
-                  ? value
-                  : Array.isArray(value)
-                    ? value.length
-                    : String(value),
-            }))}
-          gridAutoColumns="1fr 1fr"
-          labelAlign="left"
-          valueAlign="right"
-        />
+        <StyledSettingsAdminTableCardContainer>
+          <SettingsAdminTableCard
+            rounded
+            items={Object.entries(metricsDetails)
+              .filter(([key]) => key !== '__typename')
+              .map(([key, value]) => ({
+                label: key.charAt(0).toUpperCase() + key.slice(1),
+                value:
+                  typeof value === 'number'
+                    ? value
+                    : Array.isArray(value)
+                      ? value.length
+                      : String(value),
+              }))}
+            gridAutoColumns="1fr 1fr"
+            labelAlign="left"
+            valueAlign="right"
+          />
+        </StyledSettingsAdminTableCardContainer>
       )}
     </>
   );