chore(twenty-front): migrate command-menu, workflow, page-layout and UI modules from Emotion to Linaria (PR 4-6/10) (#18342)

## Summary

Continues the Emotion → Linaria migration (PR 4-6 from the [migration
plan](docs/emotion-to-linaria-migration-plan.md)). Migrates **311
files** across four module groups:

| Module | Files |
|---|---|
| command-menu | 53 |
| workflow | 84 |
| page-layout | 84 |
| UI (partial - first ~80 files) | ~80 |
| twenty-ui (TEXT_INPUT_STYLE) | 1 |
| misc (hooks, keyboard-shortcut-menu, file-upload) | ~9 |

### Migration patterns applied

- `import styled from '@emotion/styled'` → `import { styled } from
'@linaria/react'`
- `import { useTheme } from '@emotion/react'` → `import { useContext }
from 'react'` + `import { ThemeContext } from 'twenty-ui/theme'`
- `${({ theme }) => theme.X.Y.Z}` → `${themeCssVariables.X.Y.Z}` (static
CSS variables)
- `theme.spacing(N)` → `themeCssVariables.spacing[N]`
- `styled(motion.div)` → `motion.create(StyledBase)` (11 components)
- `styled(Component)<TypeParams>` → wrapper div approach for non-HTML
elements
- Multi-declaration interpolations split into one CSS property per
interpolation
- Interpolation return types fixed (`&&` → ternary `? : ''`)
- `TEXT_INPUT_STYLE` converted from function to static string constant
(backward compatible)
- Emotion `<Global>` replaced with `useEffect` style injection
- Complex runtime-dependent styles use CSS custom properties via
`style={}` prop

### After this PR

- **Remaining files**: ~400 (object-record: ~160, settings: ~200, UI:
~44)
- **No breaking changes**: CSS variables resolve identically to the
previous Emotion theme values

packages/twenty-ui/src/testing/decorators/CatalogDecorator.tsx

@@ -61,7 +61,7 @@ const StyledRowContainer = styled.div<{ theme: ThemeType }>`
 
 const StyledElementContainer = styled.div<{ width: number }>`
   display: flex;
-  ${({ width }) => width && `min-width: ${width}px;`}
+  min-width: ${({ width }) => (width ? `${width}px` : 'auto')};
 `;
 
 const StyledCellContainer = styled.div<{ theme: ThemeType }>`
@@ -120,28 +120,28 @@ export const CatalogDecorator: Decorator = (Story, context) => {
 
   return (
     <StyledContainer>
-      {dimension4.values.map((value4: any) => (
-        <StyledColumnContainer key={value4} theme={theme}>
+      {dimension4.values.map((value4: any, index4: number) => (
+        <StyledColumnContainer key={`d4-${index4}`} theme={theme}>
           <StyledColumnTitle theme={theme}>
             {dimension4.labels?.(value4) ??
               (isStringOrNumber(value4) ? value4 : '')}
           </StyledColumnTitle>
-          {dimension3.values.map((value3: any) => (
-            <StyledRowsContainer key={value3} theme={theme}>
+          {dimension3.values.map((value3: any, index3: number) => (
+            <StyledRowsContainer key={`d3-${index3}`} theme={theme}>
               <StyledRowsTitle theme={theme}>
                 {dimension3.labels?.(value3) ??
                   (isStringOrNumber(value3) ? value3 : '')}
               </StyledRowsTitle>
-              {dimension2.values.map((value2: any) => (
-                <StyledRowContainer key={value2} theme={theme}>
+              {dimension2.values.map((value2: any, index2: number) => (
+                <StyledRowContainer key={`d2-${index2}`} theme={theme}>
                   <StyledRowTitle theme={theme}>
                     {dimension2.labels?.(value2) ??
                       (isStringOrNumber(value2) ? value2 : '')}
                   </StyledRowTitle>
-                  {dimension1.values.map((value1: any) => {
+                  {dimension1.values.map((value1: any, index1: number) => {
                     return (
                       <StyledCellContainer
-                        key={value1}
+                        key={`d1-${index1}`}
                         id={value1}
                         theme={theme}
                       >