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/ui/input/components/TextArea.tsx

@@ -40,34 +40,36 @@ const StyledLabel = styled.label`
   margin-bottom: ${themeCssVariables.spacing[1]};
 `;
 
-const StyledTextArea = styled(TextareaAutosize)`
-  background-color: ${themeCssVariables.background.transparent.lighter};
-  border: 1px solid ${themeCssVariables.border.color.medium};
-  border-radius: ${themeCssVariables.border.radius.sm};
-  box-sizing: border-box;
-  color: ${themeCssVariables.font.color.primary};
-  font-family: inherit;
-  font-size: ${themeCssVariables.font.size.md};
-  font-weight: ${themeCssVariables.font.weight.regular};
-  line-height: 16px;
-  overflow: auto;
-  padding: ${themeCssVariables.spacing[2]};
-  resize: none;
-  width: 100%;
-
-  &:focus {
-    outline: none;
-    box-shadow: 0px 0px 0px 3px ${themeCssVariables.color.transparent.blue2};
-    border-color: ${themeCssVariables.color.blue};
-  }
-
-  &::placeholder {
-    color: ${themeCssVariables.font.color.light};
+const StyledTextAreaContainer = styled.div`
+  > textarea {
+    background-color: ${themeCssVariables.background.transparent.lighter};
+    border: 1px solid ${themeCssVariables.border.color.medium};
+    border-radius: ${themeCssVariables.border.radius.sm};
+    box-sizing: border-box;
+    color: ${themeCssVariables.font.color.primary};
+    font-family: inherit;
+    font-size: ${themeCssVariables.font.size.md};
     font-weight: ${themeCssVariables.font.weight.regular};
-  }
+    line-height: 16px;
+    overflow: auto;
+    padding: ${themeCssVariables.spacing[2]};
+    resize: none;
+    width: 100%;
 
-  &:disabled {
-    color: ${themeCssVariables.font.color.tertiary};
+    &:focus {
+      outline: none;
+      box-shadow: 0px 0px 0px 3px ${themeCssVariables.color.transparent.blue2};
+      border-color: ${themeCssVariables.color.blue};
+    }
+
+    &::placeholder {
+      color: ${themeCssVariables.font.color.light};
+      font-weight: ${themeCssVariables.font.weight.regular};
+    }
+
+    &:disabled {
+      color: ${themeCssVariables.font.color.tertiary};
+    }
   }
 `;
 
@@ -115,22 +117,24 @@ export const TextArea = ({
     <StyledContainer>
       {label && <StyledLabel htmlFor={instanceId}>{label}</StyledLabel>}
 
-      <StyledTextArea
-        id={instanceId}
-        placeholder={placeholder}
-        maxRows={maxRows}
-        minRows={computedMinRows}
-        value={value}
-        onChange={(event) =>
-          onChange?.(turnIntoEmptyStringIfWhitespacesOnly(event.target.value))
-        }
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        disabled={disabled}
-        className={className}
-        readOnly={readOnly}
-        style={isDefined(height) ? { height } : undefined}
-      />
+      <StyledTextAreaContainer>
+        <TextareaAutosize
+          id={instanceId}
+          placeholder={placeholder}
+          maxRows={maxRows}
+          minRows={computedMinRows}
+          value={value}
+          onChange={(event) =>
+            onChange?.(turnIntoEmptyStringIfWhitespacesOnly(event.target.value))
+          }
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          disabled={disabled}
+          className={className}
+          readOnly={readOnly}
+          style={isDefined(height) ? { height } : undefined}
+        />
+      </StyledTextAreaContainer>
     </StyledContainer>
   );
 };