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/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx

@@ -26,9 +26,12 @@ import { LightIconButton } from 'twenty-ui/input';
 import { RelationType } from '~/generated-metadata/graphql';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledLink = styled(Link)`
+const StyledLinkContainer = styled.div`
   display: flex;
-  text-decoration: none;
+
+  > * {
+    text-decoration: none;
+  }
 `;
 
 const StyledSeeAllButtonWrapper = styled.div<{ isMobile: boolean }>`
@@ -131,11 +134,13 @@ export const WidgetActionFieldSeeAll = () => {
   return (
     <>
       <div id={tooltipId}>
-        <StyledLink to={filterLinkHref} data-testid="widget-see-all-link">
-          <StyledSeeAllButtonWrapper isMobile={isMobile}>
-            <LightIconButton Icon={IconArrowUpRight} accent="secondary" />
-          </StyledSeeAllButtonWrapper>
-        </StyledLink>
+        <StyledLinkContainer>
+          <Link to={filterLinkHref} data-testid="widget-see-all-link">
+            <StyledSeeAllButtonWrapper isMobile={isMobile}>
+              <LightIconButton Icon={IconArrowUpRight} accent="secondary" />
+            </StyledSeeAllButtonWrapper>
+          </Link>
+        </StyledLinkContainer>
       </div>
       <AppTooltip
         anchorSelect={`#${tooltipId}`}

packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetShowMoreButton.tsx

@@ -30,7 +30,8 @@ const StyledButton = styled.button`
   }
 `;
 
-const StyledIcon = styled(IconChevronDown)`
+const StyledIconContainer = styled.span`
+  display: flex;
   height: 16px;
   width: 16px;
 `;
@@ -41,7 +42,9 @@ export const FieldWidgetShowMoreButton = ({
 }: FieldWidgetShowMoreButtonProps) => {
   return (
     <StyledButton data-testid="field-widget-show-more-button" onClick={onClick}>
-      <StyledIcon />
+      <StyledIconContainer>
+        <IconChevronDown />
+      </StyledIconContainer>
       {t`More (${remainingCount})`}
     </StyledButton>
   );

packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidget.tsx

@@ -40,9 +40,14 @@ const StyledPropertyBox = styled.div`
   padding-bottom: ${themeCssVariables.spacing[3]};
 `;
 
-const StyledInlineFieldsPropertyBox = styled(StyledPropertyBox)`
-  padding-bottom: 0;
+const StyledInlineFieldsPropertyBox = styled.div`
+  align-self: stretch;
+  border-radius: ${themeCssVariables.border.radius.sm};
+  display: flex;
+  flex-direction: column;
+  gap: ${themeCssVariables.spacing[2]};
   padding-top: 0;
+  padding-bottom: 0;
 `;
 
 type FieldsWidgetProps = {

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx

@@ -37,9 +37,11 @@ const StyledTrendIconContainer = styled.div`
   justify-content: center;
 `;
 
-const StyledH1Title = styled(H1Title)`
-  font-size: ${themeCssVariables.font.size.xxl};
-  margin: 0;
+const StyledH1TitleWrapper = styled.div`
+  > h2 {
+    font-size: ${themeCssVariables.font.size.xxl};
+    margin: 0;
+  }
 `;
 
 export const GraphWidgetAggregateChart = ({
@@ -58,10 +60,9 @@ export const GraphWidgetAggregateChart = ({
 
   return (
     <StyledContainer>
-      <StyledH1Title
-        title={displayValue}
-        fontColor={H1TitleFontColor.Primary}
-      />
+      <StyledH1TitleWrapper>
+        <H1Title title={displayValue} fontColor={H1TitleFontColor.Primary} />
+      </StyledH1TitleWrapper>
       {isDefined(trendPercentage) && (
         <StyledTrendIconContainer>
           <StyledTrendPercentageValue>

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx

@@ -51,7 +51,7 @@ const StyledChartContainer = styled.div<{ $isClickable?: boolean }>`
       : ''}
 `;
 
-const StyledH1Title = styled(H1Title)`
+const StyledH1TitleWrapper = styled.div`
   left: 50%;
   position: absolute;
   top: 50%;
@@ -135,10 +135,12 @@ export const GraphWidgetGaugeChart = ({
           layers={['bars', renderValueEndLine]}
         />
         {showValue && (
-          <StyledH1Title
-            title={formattedValue}
-            fontColor={H1TitleFontColor.Primary}
-          />
+          <StyledH1TitleWrapper>
+            <H1Title
+              title={formattedValue}
+              fontColor={H1TitleFontColor.Primary}
+            />
+          </StyledH1TitleWrapper>
         )}
       </StyledChartContainer>
       <GraphWidgetLegend