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/blocknote-editor/blocks/MentionInlineContent.tsx

@@ -11,13 +11,15 @@ import { Chip, ChipVariant } from 'twenty-ui/components';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 
-const StyledRecordChip = styled(RecordChip)`
+const StyledRecordChipContainer = styled.div`
+  display: inline;
   height: auto;
   margin: 0;
   padding: 0 ${themeCssVariables.spacing[1]};
 `;
 
-const StyledInlineMentionRecordChip = styled(MentionRecordChip)`
+const StyledInlineMentionRecordChipContainer = styled.div`
+  display: inline;
   height: auto;
   margin: 0;
   padding: 0 ${themeCssVariables.spacing[1]};
@@ -69,11 +71,13 @@ const LegacyMentionRenderer = ({
   }
 
   return (
-    <StyledRecordChip
-      objectNameSingular={objectMetadataItem.nameSingular}
-      record={record}
-      forceDisableClick={false}
-    />
+    <StyledRecordChipContainer>
+      <RecordChip
+        objectNameSingular={objectMetadataItem.nameSingular}
+        record={record}
+        forceDisableClick={false}
+      />
+    </StyledRecordChipContainer>
   );
 };
 
@@ -112,12 +116,14 @@ export const MentionInlineContent = createReactInlineContentSpec(
       // New notes store objectNameSingular + label + imageUrl directly
       if (isNonEmptyString(objectNameSingular) && isNonEmptyString(label)) {
         return (
-          <StyledInlineMentionRecordChip
-            recordId={recordId}
-            objectNameSingular={objectNameSingular}
-            label={label}
-            imageUrl={imageUrl}
-          />
+          <StyledInlineMentionRecordChipContainer>
+            <MentionRecordChip
+              recordId={recordId}
+              objectNameSingular={objectNameSingular}
+              label={label}
+              imageUrl={imageUrl}
+            />
+          </StyledInlineMentionRecordChipContainer>
         );
       }