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/field/input/components/CurrencyInput.tsx

@@ -9,25 +9,27 @@ import { IMaskInput } from 'react-imask';
 import { type IconComponent } from 'twenty-ui/display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-export const StyledIMaskInput = styled(IMaskInput)`
-  margin: 0;
-  background-color: transparent;
-  border: none;
-  color: ${themeCssVariables.font.color.primary};
-  font-family: ${themeCssVariables.font.family};
-  font-size: inherit;
-  font-weight: inherit;
-  outline: none;
-  padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[1.5]};
-
-  &::placeholder,
-  &::-webkit-input-placeholder {
-    color: ${themeCssVariables.font.color.light};
+export const StyledIMaskInput = styled.div`
+  > input {
+    margin: 0;
+    background-color: transparent;
+    border: none;
+    color: ${themeCssVariables.font.color.primary};
     font-family: ${themeCssVariables.font.family};
-    font-weight: ${themeCssVariables.font.weight.medium};
-  }
+    font-size: inherit;
+    font-weight: inherit;
+    outline: none;
+    padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[1.5]};
 
-  width: 100%;
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      color: ${themeCssVariables.font.color.light};
+      font-family: ${themeCssVariables.font.family};
+      font-weight: ${themeCssVariables.font.weight.medium};
+    }
+
+    width: 100%;
+  }
 `;
 
 const StyledContainer = styled.div`
@@ -124,19 +126,21 @@ export const CurrencyInput = ({
           <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
         )}
       </StyledIcon>
-      <StyledIMaskInput
-        mask={Number}
-        thousandsSeparator=","
-        radix="."
-        scale={decimals}
-        onAccept={(value: string) => handleChange(value)}
-        inputRef={wrapperRef}
-        autoComplete="off"
-        placeholder={placeholder}
-        autoFocus={autoFocus}
-        value={value}
-        unmask
-      />
+      <StyledIMaskInput>
+        <IMaskInput
+          mask={Number}
+          thousandsSeparator=","
+          radix="."
+          scale={decimals}
+          onAccept={(value: string) => handleChange(value)}
+          inputRef={wrapperRef}
+          autoComplete="off"
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+          value={value}
+          unmask
+        />
+      </StyledIMaskInput>
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx

@@ -25,31 +25,33 @@ export type TextAreaInputProps = {
   copyButton?: boolean;
 };
 
-const StyledTextArea = styled(TextareaAutosize)`
-  background-color: transparent;
-  border: none;
-  color: ${themeCssVariables.font.color.primary};
-  font-family: ${themeCssVariables.font.family};
-  font-size: inherit;
-  font-weight: inherit;
-  outline: none;
-  padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
-
-  &::placeholder,
-  &::-webkit-input-placeholder {
-    color: ${themeCssVariables.font.color.light};
+const StyledTextAreaContainer = styled.div`
+  > textarea {
+    background-color: transparent;
+    border: none;
+    color: ${themeCssVariables.font.color.primary};
     font-family: ${themeCssVariables.font.family};
-    font-weight: ${themeCssVariables.font.weight.medium};
+    font-size: inherit;
+    font-weight: inherit;
+    outline: none;
+    padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      color: ${themeCssVariables.font.color.light};
+      font-family: ${themeCssVariables.font.family};
+      font-weight: ${themeCssVariables.font.weight.medium};
+    }
+
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    resize: none;
+    max-height: 400px;
+    width: calc(100% - ${themeCssVariables.spacing[7]});
+
+    line-height: 18px;
   }
-
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  resize: none;
-  max-height: 400px;
-  width: calc(100% - ${themeCssVariables.spacing[7]});
-
-  line-height: 18px;
 `;
 
 const StyledLightIconButtonContainer = styled.div`
@@ -111,16 +113,18 @@ export const TextAreaInput = ({
 
   return (
     <>
-      <StyledTextArea
-        placeholder={placeholder}
-        disabled={disabled}
-        className={className}
-        ref={wrapperRef}
-        onChange={handleChange}
-        autoFocus={autoFocus}
-        value={internalText}
-        maxRows={maxRows}
-      />
+      <StyledTextAreaContainer>
+        <TextareaAutosize
+          placeholder={placeholder}
+          disabled={disabled}
+          className={className}
+          ref={wrapperRef}
+          onChange={handleChange}
+          autoFocus={autoFocus}
+          value={internalText}
+          maxRows={maxRows}
+        />
+      </StyledTextAreaContainer>
       {copyButton && (
         <StyledLightIconButtonContainer ref={copyRef}>
           <LightCopyIconButton copyText={internalText} />