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-front/src/modules/advanced-text-editor/extensions/resizable-image/ResizableImageView.tsx

@@ -11,18 +11,10 @@ const StyledNodeViewWrapperContainer = styled.div<{
   align?: string;
 }>`
   height: 100%;
-  ${({ align }) => {
-    switch (align) {
-      case 'left':
-        return 'margin-left: 0;';
-      case 'right':
-        return 'margin-right: 0;';
-      case 'center':
-        return 'margin-left: auto; margin-right: auto;';
-      default:
-        return '';
-    }
-  }}
+  margin-left: ${({ align }) =>
+    align === 'left' ? '0' : align === 'center' ? 'auto' : 'unset'};
+  margin-right: ${({ align }) =>
+    align === 'right' ? '0' : align === 'center' ? 'auto' : 'unset'};
 `;
 
 const StyledImageWrapper = styled.div<{ width?: number }>`
@@ -51,10 +43,10 @@ const StyledImageHandle = styled.div<{ handle: 'left' | 'right' }>`
   width: ${themeCssVariables.spacing[2]};
   z-index: 1;
 
-  ${({ handle }) =>
-    handle === 'left'
-      ? `left: ${themeCssVariables.spacing[1]};`
-      : `right: ${themeCssVariables.spacing[1]};`}
+  left: ${({ handle }) =>
+    handle === 'left' ? themeCssVariables.spacing[1] : 'auto'};
+  right: ${({ handle }) =>
+    handle === 'right' ? themeCssVariables.spacing[1] : 'auto'};
 `;
 
 type ResizeParams = {