chore(twenty-front): migrate auth, activities, AI, pages and small modules from Emotion to Linaria (PR 2-3/10) (#18328)

## Summary

- Migrate ~200 files from `@emotion/styled` / `@emotion/react` to
`@linaria/react` + `themeCssVariables`, continuing the zero-runtime
CSS-in-JS migration (PR 2-3 of the [migration
plan](docs/emotion-to-linaria-migration-plan.md))
- Modules covered: **auth** (19), **activities** (53), **ai** (30),
**pages** (70), **action-menu** (3), **object-metadata** (4),
**onboarding** (2), **workspace** (2), **file** (3), **error-handler**
(2), **front-components** (1), **geo-map** (1), **loading** (5),
**testing** (5), plus a `style` prop addition to `TableRow`
- Handles `styled(FunctionComponent)<Props>` incompatibility with
Linaria by using CSS custom properties via `style` + `var()` references

## Test plan

- [x] `npx nx lint:diff-with-main twenty-front` passes
- [x] `npx nx typecheck twenty-front` passes
- [ ] Visual spot-check of auth, onboarding, settings, activities, and
AI chat screens
- [ ] No remaining `@emotion/styled` or `@emotion/react` imports in
migrated files


Made with [Cursor](https://cursor.com)

packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx

@@ -11,6 +11,7 @@ const StyledTableRow = styled('div', {
   onClick?: () => void;
   to?: string;
   gridAutoColumns?: string;
+  gridTemplateColumns?: string;
   mobileGridAutoColumns?: string;
 }>`
   background-color: ${({ isSelected, theme }) =>
@@ -18,6 +19,10 @@ const StyledTableRow = styled('div', {
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: grid;
   grid-auto-columns: ${({ gridAutoColumns }) => gridAutoColumns ?? '1fr'};
+  ${({ gridTemplateColumns }) =>
+    gridTemplateColumns
+      ? `grid-template-columns: ${gridTemplateColumns};`
+      : ''};
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     grid-auto-columns: ${({ mobileGridAutoColumns, gridAutoColumns }) =>
@@ -35,31 +40,44 @@ const StyledTableRow = styled('div', {
       onClick || to ? theme.background.transparent.light : 'transparent'};
     cursor: ${({ onClick, to }) => (onClick || to ? 'pointer' : 'default')};
   }
+
+  &[data-clickable='true'] {
+    cursor: pointer;
+  }
 `;
 
 type TableRowProps = {
   isSelected?: boolean;
+  isClickable?: boolean;
   onClick?: () => void;
   to?: string;
   className?: string;
+  style?: React.CSSProperties;
   gridAutoColumns?: string;
+  gridTemplateColumns?: string;
   mobileGridAutoColumns?: string;
 };
 
 export const TableRow = ({
   isSelected,
+  isClickable,
   onClick,
   to,
   className,
+  style,
   children,
   gridAutoColumns,
+  gridTemplateColumns,
   mobileGridAutoColumns,
 }: React.PropsWithChildren<TableRowProps>) => (
   <StyledTableRow
     isSelected={isSelected}
     onClick={onClick}
     gridAutoColumns={gridAutoColumns}
+    gridTemplateColumns={gridTemplateColumns}
     className={className}
+    style={style}
+    data-clickable={isClickable}
     mobileGridAutoColumns={mobileGridAutoColumns}
     to={to}
     as={to ? Link : 'div'}

packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -7,7 +7,7 @@ import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/sta
 import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
 import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
 
-const StyledScrollWrapper = styled.div`
+const StyledScrollWrapper = styled.div<{ autoHeight?: boolean }>`
   &.scroll-wrapper-x-enabled {
     overflow-x: overlay;
   }
@@ -17,7 +17,7 @@ const StyledScrollWrapper = styled.div`
   overflow-x: hidden;
   overflow-y: hidden;
   width: 100%;
-  height: 100%;
+  height: ${({ autoHeight }) => (autoHeight ? 'auto' : '100%')};
 `;
 
 export type ScrollWrapperProps = {
@@ -25,6 +25,7 @@ export type ScrollWrapperProps = {
   className?: string;
   defaultEnableXScroll?: boolean;
   defaultEnableYScroll?: boolean;
+  autoHeight?: boolean;
   componentInstanceId: string;
 };
 
@@ -34,6 +35,7 @@ export const ScrollWrapper = ({
   className,
   defaultEnableXScroll = true,
   defaultEnableYScroll = true,
+  autoHeight = false,
 }: ScrollWrapperProps) => {
   const setScrollWrapperScrollTop = useSetAtomComponentState(
     scrollWrapperScrollTopComponentState,
@@ -70,6 +72,7 @@ export const ScrollWrapper = ({
       <StyledScrollWrapper
         id={`scroll-wrapper-${componentInstanceId}`}
         className={className}
+        autoHeight={autoHeight}
         onScroll={handleScroll}
       >
         {children}