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/side-panel/components/SidePanelBackButton.tsx

@@ -14,15 +14,12 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledNavigationIcon = styled.div`
   align-items: center;
+  color: ${themeCssVariables.font.color.secondary};
   cursor: pointer;
   display: flex;
   justify-content: center;
 `;
 
-const StyledIconChevronLeft = styled(IconChevronLeft)`
-  color: ${themeCssVariables.font.color.secondary};
-`;
-
 export const SidePanelBackButton = () => {
   const { goBackFromSidePanel } = useSidePanelHistory();
 
@@ -53,7 +50,7 @@ export const SidePanelBackButton = () => {
       clickableComponent={
         <StyledNavigationIcon onContextMenu={handleBackButtonContextMenu}>
           <IconButton
-            Icon={StyledIconChevronLeft}
+            Icon={IconChevronLeft}
             size="small"
             variant="tertiary"
             onClick={goBackFromSidePanel}

packages/twenty-front/src/modules/side-panel/components/SidePanelGroup.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Label } from 'twenty-ui/display';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledGroupHeading = styled(Label)`
+const StyledGroupHeadingContainer = styled.div`
   align-items: center;
   padding-bottom: ${themeCssVariables.spacing[1]};
   padding-left: ${themeCssVariables.spacing[1]};
@@ -29,7 +29,9 @@ export const SidePanelGroup = ({ heading, children }: SidePanelGroupProps) => {
   }
   return (
     <>
-      <StyledGroupHeading>{heading}</StyledGroupHeading>
+      <StyledGroupHeadingContainer>
+        <Label>{heading}</Label>
+      </StyledGroupHeadingContainer>
       <StyledGroup>{children}</StyledGroup>
     </>
   );

packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarRightCornerIcon.tsx

@@ -13,7 +13,7 @@ import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { useCreateNewAIChatThread } from '@/ai/hooks/useCreateNewAIChatThread';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledIconButton = styled(IconButton)`
+const StyledIconButtonContainer = styled.div`
   color: ${themeCssVariables.font.color.secondary};
 `;
 
@@ -35,22 +35,26 @@ export const SidePanelTopBarRightCornerIcon = () => {
 
   if (!isOnAskAIPage) {
     return (
-      <StyledIconButton
-        onClick={() => openAskAIPage({ resetNavigationStack: false })}
-        Icon={IconSparkles}
-        variant="tertiary"
-        size="small"
-      />
+      <StyledIconButtonContainer>
+        <IconButton
+          onClick={() => openAskAIPage({ resetNavigationStack: false })}
+          Icon={IconSparkles}
+          variant="tertiary"
+          size="small"
+        />
+      </StyledIconButtonContainer>
     );
   }
 
   return (
-    <StyledIconButton
-      Icon={IconEdit}
-      size="small"
-      variant="tertiary"
-      onClick={() => createChatThread()}
-      ariaLabel={t`New conversation`}
-    />
+    <StyledIconButtonContainer>
+      <IconButton
+        Icon={IconEdit}
+        size="small"
+        variant="tertiary"
+        onClick={() => createChatThread()}
+        ariaLabel={t`New conversation`}
+      />
+    </StyledIconButtonContainer>
   );
 };