Re-enable disabled lint rules and right-size CI runners (#18461)

## Summary - Re-enable one lint rule that was temporarily disabled during the ESLint-to-Oxlint migration: - **`twenty/sort-css-properties-alphabetically`** in twenty-front — 578 violations auto-fixed across 390 files - Document why **`typescript/consistent-type-imports`** cannot be auto-fixed in twenty-server: NestJS relies on `emitDecoratorMetadata` for DI, so converting constructor parameter imports to `import type` erases them at compile time and breaks dependency injection at runtime - Right-size CI runners, reducing 8-core usage from 18 jobs to 3: | Change | Jobs | Rationale | |--------|------|-----------| | **Keep 8-core** | `ci-merge-queue/e2e-test`, `ci-front/front-sb-build`, `ci-front/front-build` | Heavy builds needing max CPU + memory (10GB NODE_OPTIONS, full Storybook webpack bundling) | | **8-core → 4-core** | `ci-server` (build, lint-typecheck, validation, test, integration-test), `ci-front/front-sb-test`, `ci-zapier/server-setup`, `ci-sdk/sdk-e2e-test` | Already sharded into 10-12 parallel instances, I/O-bound (DB/Redis), or moderate single builds | | **8-core → 2-core** | `ci-emails/emails-test` | Trivially lightweight (build + curl health check) | | **Removed** | `ci-front/front-chromatic-deployment` | Dead code — permanently disabled with `if: false` | - Fix merge queue CI issues: - **Concurrency**: Use `merge_group.base_ref` instead of unique merge group ref so new queue entries cancel previous runs - **Required status checks**: Add `merge_group` trigger to all 6 required CI workflows (front, server, shared, website, docker-compose, sdk) with `changed-files-check` auto-skipped for merge_group events — status check jobs auto-pass without re-running full CI - **Build caching**: Add Nx build cache restore/save to E2E test job with fallback to `main` branch cache for faster frontend and server builds ## Test plan - [ ] CI passes on this PR (verifies lint rule auto-fix works) - [ ] Verify 4-core runner jobs complete within their 30-minute timeouts - [ ] Verify merge queue status checks auto-pass (ci-front-status-check, ci-server-status-check, etc.) - [ ] Verify merge queue E2E concurrency cancels previous runs when a new PR enters the queue
2026-03-06 14:33:02 +01:00
parent 9f9a6a45dd
commit ef499b6d47
404 changed files with 1755 additions and 1738 deletions
@@ -43,9 +43,9 @@ const StyledDescription = styled.div`
 `;

 const StyledRadioContainer = styled.span`
-  margin-left: auto;
-  display: flex;
  align-items: center;
+  display: flex;
+  margin-left: auto;
 `;

 const StyledExpandedContent = styled.div`
@@ -17,9 +17,9 @@ type SettingsAccountsToggleSettingCardProps = {
 const StyledCardContentContainer = styled.div`
  > * {
    align-items: center;
+    cursor: pointer;
    display: flex;
    gap: ${themeCssVariables.spacing[4]};
-    cursor: pointer;

    &:hover {
      background: ${themeCssVariables.background.transparent.lighter};
@@ -39,9 +39,9 @@ const StyledDescription = styled.div`
 `;

 const StyledToggleContainer = styled.span`
-  margin-left: auto;
-  display: flex;
  align-items: center;
+  display: flex;
+  margin-left: auto;
 `;

 export const SettingsAccountsToggleSettingCard = ({
@@ -21,9 +21,9 @@ const StyledTableRowContainer = styled.div`
 `;

 const StyledEllipsisLabel = styled.div`
-  white-space: nowrap;
-  text-overflow: ellipsis;
  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;

 export const SettingsAdminConfigVariablesRow = ({
@@ -10,17 +10,17 @@ import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';

 const StyledDetailsContainer = styled.div`
  background-color: ${themeCssVariables.background.secondary};
-  padding: ${themeCssVariables.spacing[4]};
-  border-radius: ${themeCssVariables.border.radius.md};
  border: 1px solid ${themeCssVariables.border.color.medium};
+  border-radius: ${themeCssVariables.border.radius.md};
  font-size: ${themeCssVariables.font.size.sm};
  overflow-x: auto;
+  padding: ${themeCssVariables.spacing[4]};
 `;

 const StyledErrorMessage = styled.div`
  color: ${themeCssVariables.color.red};
-  margin-top: ${themeCssVariables.spacing[2]};
  margin-bottom: ${themeCssVariables.spacing[4]};
+  margin-top: ${themeCssVariables.spacing[2]};
 `;

 export const SettingsAdminJsonDataIndicatorHealthStatus = () => {
@@ -14,9 +14,9 @@ import {

 const StyledGraphContainer = styled.div`
  background-color: ${themeCssVariables.background.secondary};
+  border: 1px solid ${themeCssVariables.border.color.medium};
  border-radius: ${themeCssVariables.border.radius.md};
  height: 240px;
-  border: 1px solid ${themeCssVariables.border.color.medium};
  margin-bottom: ${themeCssVariables.spacing[4]};
  padding-top: 10px;
  width: 100%;
@@ -32,10 +32,10 @@ const StyledTooltipColorCircle = styled.div<{ color: string }>`

 const StyledTooltipDataRow = styled.div`
  align-items: center;
-  display: flex;
-  justify-content: space-between;
  color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
  gap: ${themeCssVariables.spacing[2]};
+  justify-content: space-between;
  width: 100%;
 `;

@@ -16,20 +16,20 @@ type AdvancedSettingsContentWrapperWithDotProps = {
 };

 const StyledDotContainer = styled.div<{ dotPosition: DotPosition }>`
+  align-items: ${({ dotPosition }) =>
+    dotPosition === 'top' ? 'stretch' : 'center'};
  display: flex;
-  position: absolute;
  height: 100%;
  left: calc(-1 * ${themeCssVariables.spacing[5]});

+  position: absolute;
  top: ${({ dotPosition }) => (dotPosition === 'top' ? '0' : 'auto')};
-  align-items: ${({ dotPosition }) =>
-    dotPosition === 'top' ? 'stretch' : 'center'};
 `;

 const StyledIconPointContainer = styled.span`
-  margin-right: 0;
-  display: flex;
  align-items: center;
+  display: flex;
+  margin-right: 0;
 `;

 export const AdvancedSettingsContentWrapperWithDot = ({
@@ -29,10 +29,10 @@ const StyledTextInputContainer = styled.div`
  width: ${themeCssVariables.spacing[16]};

  > * input {
-    width: ${themeCssVariables.spacing[16]};
+    font-weight: ${themeCssVariables.font.weight.medium};
    height: ${themeCssVariables.spacing[6]};
    text-align: center;
-    font-weight: ${themeCssVariables.font.weight.medium};
+    width: ${themeCssVariables.spacing[16]};
  }
 `;

@@ -14,14 +14,14 @@ const OBJECT_MOBILE_WIDTH = 150;
 const ACTION_MOBILE_WIDTH = 140;

 const StyledFilterRow = styled.div<{ isMobile: boolean }>`
+  align-items: center;
  display: grid;
+  gap: ${themeCssVariables.spacing[2]};
  grid-template-columns: ${({ isMobile }) =>
    isMobile
      ? `${OBJECT_MOBILE_WIDTH}px ${ACTION_MOBILE_WIDTH}px auto`
      : `${OBJECT_DROPDOWN_WIDTH}px ${ACTION_DROPDOWN_WIDTH}px auto`};
-  gap: ${themeCssVariables.spacing[2]};
  margin-bottom: ${themeCssVariables.spacing[2]};
-  align-items: center;
 `;

 const StyledPlaceholder = styled.div`
@@ -30,8 +30,8 @@ type SettingsDnsRecordsTableProps = {

 const StyledTableRowContainer = styled.div`
  > * > * {
-    min-width: 0;
    max-width: 100%;
+    min-width: 0;
    overflow: hidden;
  }
 `;
@@ -17,10 +17,10 @@ type SettingsItemTypeTagProps = {

 const StyledContainer = styled.div`
  align-items: center;
+  color: ${themeCssVariables.font.color.secondary};
  display: flex;
  font-size: ${themeCssVariables.font.size.sm};
  gap: ${themeCssVariables.spacing[1]};
-  color: ${themeCssVariables.font.color.secondary};
 `;

 export const SettingsItemTypeTag = ({
@@ -22,13 +22,13 @@ const StyledButton = styled.button`
  border: none;
  border-radius: ${themeCssVariables.border.radius.sm};
  color: ${themeCssVariables.font.color.secondary};
-  gap: ${themeCssVariables.spacing[2]};
-  padding: 0 ${themeCssVariables.spacing[1]};
-  padding-left: ${themeCssVariables.spacing[2]};
  cursor: pointer;
  display: flex;
  flex: 1 0 0;
+  gap: ${themeCssVariables.spacing[2]};
  height: ${themeCssVariables.spacing[8]};
+  padding: 0 ${themeCssVariables.spacing[1]};
+  padding-left: ${themeCssVariables.spacing[2]};
  width: 100%;

  &:hover {
@@ -13,9 +13,9 @@ const StyledRowContainer = styled.div`
    font-size: ${themeCssVariables.font.size.sm};
    font-weight: ${themeCssVariables.font.weight.medium};
    gap: ${themeCssVariables.spacing[2]};
+    min-height: ${themeCssVariables.spacing[6]};
    padding: ${themeCssVariables.spacing[2]};
    padding-left: ${themeCssVariables.spacing[3]};
-    min-height: ${themeCssVariables.spacing[6]};
  }
 `;

@@ -26,8 +26,8 @@ const StyledRightContainer = styled.div`
 `;

 const StyledContent = styled.div`
-  flex: 1 1 0;
  display: flex;
+  flex: 1 1 0;
  gap: ${themeCssVariables.spacing[1]};
  min-width: 0;
  overflow: hidden;
@@ -9,22 +9,22 @@ type StyledCardContentProps = {

 export const StyledSettingsCardContent = styled.div<StyledCardContentProps>`
  align-items: ${({ alignItems }) => alignItems ?? 'center'};
+  background-color: ${themeCssVariables.background.secondary};
  display: flex;
  gap: ${themeCssVariables.spacing[3]};
-  background-color: ${themeCssVariables.background.secondary};
  height: ${({ fullHeight }) => (fullHeight ? '100%' : 'auto')};
  padding: ${themeCssVariables.spacing[4]};
 `;
 export const StyledSettingsCardIcon = styled.div`
  align-items: center;
+  background-color: ${themeCssVariables.background.primary};
  border: 2px solid ${themeCssVariables.border.color.light};
  border-radius: ${themeCssVariables.border.radius.sm};
-  background-color: ${themeCssVariables.background.primary};
  display: flex;
  height: ${themeCssVariables.spacing[7]};
  justify-content: center;
-  width: ${themeCssVariables.spacing[7]};
  min-width: ${themeCssVariables.icon.size.md};
+  width: ${themeCssVariables.spacing[7]};
 `;

 export const StyledSettingsCardTitle = styled.div`
@@ -41,13 +41,13 @@ export const StyledSettingsCardTextContainer = styled.div`
 export const StyledSettingsCardDescription = styled.div`
  color: ${themeCssVariables.font.color.secondary};
  font-size: ${themeCssVariables.font.size.sm};
-  overflow: hidden;
  line-height: 1.5;
+  overflow: hidden;

  a {
+    pointer-events: auto;
    position: relative;
    z-index: 1;
-    pointer-events: auto;
  }
 `;

@@ -17,13 +17,13 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledSettingsCardToggleContent = styled.div<{ disabled?: boolean }>`
  align-items: center;
+  background-color: ${themeCssVariables.background.secondary};
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
  display: flex;
  gap: ${themeCssVariables.spacing[3]};
-  background-color: ${themeCssVariables.background.secondary};
  padding: ${themeCssVariables.spacing[4]};
-  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
-  position: relative;
  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+  position: relative;

  &:hover {
    background: ${themeCssVariables.background.transparent.lighter};
@@ -10,8 +10,8 @@ type SettingsOptionIconCustomizerProps = {
 };

 const StyledIconCustomizer = styled.div<{ zoom: number; rotate: number }>`
-  display: inline-flex;
  align-items: center;
+  display: inline-flex;
  justify-content: center;
  transform: scale(${({ zoom }) => zoom}) rotate(${({ rotate }) => rotate}deg);
 `;
@@ -19,6 +19,7 @@ const StyledSettingsPageContainer = styled.div<{
  overflow: auto;
  padding: ${themeCssVariables.spacing[6]} ${themeCssVariables.spacing[8]}
    ${themeCssVariables.spacing[8]};
+  padding-bottom: ${themeCssVariables.spacing[20]};
  width: ${({ width, isMobile }) => {
    if (isDefined(width)) {
      return width + 'px';
@@ -28,7 +29,6 @@ const StyledSettingsPageContainer = styled.div<{
    }
    return OBJECT_SETTINGS_WIDTH + 'px';
  }};
-  padding-bottom: ${themeCssVariables.spacing[20]};
 `;

 export const SettingsPageContainer = ({
@@ -7,14 +7,14 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledRadioCardContentContainer = styled.div`
  > * {
-    display: flex;
    align-items: center;
-    padding: ${themeCssVariables.spacing[2]};
    border: 1px solid ${themeCssVariables.border.color.medium};
    border-radius: ${themeCssVariables.border.radius.sm};
+    cursor: pointer;
+    display: flex;
    flex-grow: 1;
    gap: ${themeCssVariables.spacing[2]};
-    cursor: pointer;
+    padding: ${themeCssVariables.spacing[2]};

    &:hover {
      background: ${themeCssVariables.background.transparent.lighter};
@@ -13,8 +13,8 @@ const StyledCardContentContainer = styled.div`
    align-items: center;
    display: flex;
    gap: ${themeCssVariables.spacing[2]};
-    padding: ${themeCssVariables.spacing[2]};
    min-height: ${themeCssVariables.spacing[6]};
+    padding: ${themeCssVariables.spacing[2]};
  }
 `;

@@ -56,10 +56,10 @@ const StyledInputsContainer = styled.div`

 const StyledAdvancedSettingsSectionInputWrapper = styled.div`
  display: flex;
+  flex: 1;
  flex-direction: column;
  gap: ${themeCssVariables.spacing[4]};
  width: 100%;
-  flex: 1;
 `;

 const StyledAdvancedSettingsOuterContainer = styled.div`
@@ -43,9 +43,9 @@ const StyledTypeSelectContainer = styled.div`

 const StyledContainer = styled.div`
  display: flex;
+  flex-wrap: wrap;
  gap: ${themeCssVariables.spacing[2]};
  justify-content: flex-start;
-  flex-wrap: wrap;
  width: 100%;
 `;

@@ -3,8 +3,8 @@ import { type ReactNode } from 'react';

 const StyledPreviewContent = styled.div<{ isMobile: boolean }>`
  display: flex;
-  gap: 6px;
  flex-direction: ${({ isMobile }) => (isMobile ? 'column' : 'row')};
+  gap: 6px;
 `;

 export const SettingsDataModelFieldRelationPreviewContent = ({
@@ -4,6 +4,7 @@ const StyledRelationImage = styled.img<{
  flip?: boolean;
  isMobile: boolean;
 }>`
+  margin: auto;
  transform: ${({ flip, isMobile }) => {
    let transform = '';
    if (isMobile) {
@@ -14,7 +15,6 @@ const StyledRelationImage = styled.img<{
    }
    return transform.trim();
  }};
-  margin: auto;
  width: 54px;
 `;

@@ -81,12 +81,12 @@ const StyledOptionsLabel = styled.div<{
  font-size: ${themeCssVariables.font.size.xs};
  font-weight: ${themeCssVariables.font.weight.semiBold};
  margin-bottom: ${themeCssVariables.spacing['1.5']};
-  margin-top: ${themeCssVariables.spacing[1]};
-  width: 100%;
  margin-left: ${({ isAdvancedModeEnabled, isBulkInputMode }) =>
    isAdvancedModeEnabled && !isBulkInputMode
      ? themeCssVariables.spacing[10]
      : themeCssVariables.spacing[0]};
+  margin-top: ${themeCssVariables.spacing[1]};
+  width: 100%;
 `;

 const StyledApiKeyContainer = styled.div`
@@ -101,9 +101,9 @@ const StyledApiKey = styled.span`
  font-weight: ${themeCssVariables.font.weight.semiBold};
  margin-bottom: ${themeCssVariables.spacing['1.5']};
  margin-top: ${themeCssVariables.spacing[1]};
-  width: 100%;
-
  white-space: nowrap;
+
+  width: 100%;
 `;

 const StyledLabelContainer = styled.div`
@@ -122,9 +122,9 @@ const StyledIconContainer = styled.div`
 `;

 const StyledIconPointContainer = styled.span`
-  margin-right: ${themeCssVariables.spacing['0.5']};
-  display: flex;
  align-items: center;
+  display: flex;
+  margin-right: ${themeCssVariables.spacing['0.5']};
 `;

 const StyledFooterContainer = styled.div`
@@ -142,8 +142,8 @@ const StyledButtonContainer = styled.div`
 `;

 const StyledOptionsHeaderContainer = styled.div`
-  display: flex;
  align-items: center;
+  display: flex;
  justify-content: space-between;
  margin-bottom: ${themeCssVariables.spacing['1.5']};
  margin-top: ${themeCssVariables.spacing[1]};
@@ -157,8 +157,8 @@ const StyledTextAreaContainer = styled.div`
 const StyledHelpText = styled.div`
  color: ${themeCssVariables.font.color.light};
  font-size: ${themeCssVariables.font.size.xs};
-  margin-top: ${themeCssVariables.spacing[1]};
  margin-bottom: ${themeCssVariables.spacing[2]};
+  margin-top: ${themeCssVariables.spacing[1]};
 `;

 export const SettingsDataModelFieldSelectForm = ({
@@ -76,13 +76,13 @@ const StyledRow = styled.div`
 `;

 const StyledColorSampleContainer = styled.span`
-  cursor: pointer;
-  margin-top: ${themeCssVariables.spacing[1]};
-  margin-bottom: ${themeCssVariables.spacing[1]};
-  margin-right: 14px;
-  margin-left: 14px;
-  display: flex;
  align-items: center;
+  cursor: pointer;
+  display: flex;
+  margin-bottom: ${themeCssVariables.spacing[1]};
+  margin-left: 14px;
+  margin-right: 14px;
+  margin-top: ${themeCssVariables.spacing[1]};
 `;

 const StyledOptionInputContainer = styled.div`
@@ -95,15 +95,15 @@ const StyledOptionInputContainer = styled.div`
 `;

 const StyledIconGripVerticalContainer = styled.span`
-  margin-right: 3px;
-  display: flex;
  align-items: center;
+  display: flex;
+  margin-right: 3px;
 `;

 const StyledLightIconButtonContainer = styled.span`
-  margin-left: ${themeCssVariables.spacing[2]};
-  display: flex;
  align-items: center;
+  display: flex;
+  margin-left: ${themeCssVariables.spacing[2]};
 `;

 export const SettingsDataModelFieldSelectFormOptionRow = ({
@@ -35,14 +35,14 @@ const StyledFieldPreview = styled.div<{ shrink?: boolean }>`
  gap: ${themeCssVariables.spacing[2]};
  height: fit-content;
  line-height: 24px;
+  margin-top: ${themeCssVariables.spacing[2]};
  overflow: hidden;
  padding: 0
    ${({ shrink }) =>
      shrink ? themeCssVariables.spacing[1] : themeCssVariables.spacing[2]};
-  white-space: nowrap;
-  margin-top: ${themeCssVariables.spacing[2]};
-  padding-top: ${themeCssVariables.spacing[2]};
  padding-bottom: ${themeCssVariables.spacing[2]};
+  padding-top: ${themeCssVariables.spacing[2]};
+  white-space: nowrap;
 `;

 const StyledFieldLabel = styled.div`
@@ -34,14 +34,14 @@ const StyledFieldPreview = styled.div<{ shrink?: boolean }>`
  gap: ${themeCssVariables.spacing[2]};
  height: fit-content;
  line-height: 24px;
+  margin-top: ${themeCssVariables.spacing[2]};
  overflow: hidden;
  padding: 0
    ${({ shrink }) =>
      shrink ? themeCssVariables.spacing[1] : themeCssVariables.spacing[2]};
-  white-space: nowrap;
-  margin-top: ${themeCssVariables.spacing[2]};
-  padding-top: ${themeCssVariables.spacing[2]};
  padding-bottom: ${themeCssVariables.spacing[2]};
+  padding-top: ${themeCssVariables.spacing[2]};
+  white-space: nowrap;
 `;

 const StyledFieldLabel = styled.div`
@@ -63,9 +63,9 @@ const StyledContainer = styled.div`
 `;

 const StyledCloseButton = styled.div`
+  left: ${themeCssVariables.spacing[3]};
  position: absolute;
  top: ${themeCssVariables.spacing[3]};
-  left: ${themeCssVariables.spacing[3]};
  z-index: 5;
 `;

@@ -17,9 +17,9 @@ const StyledRow = styled.div`
  align-items: center;
  display: flex;
  gap: ${themeCssVariables.spacing[2]};
+  padding: 0 ${themeCssVariables.spacing[2]};
  position: relative;
  width: 100%;
-  padding: 0 ${themeCssVariables.spacing[2]};
 `;

 const StyledFieldName = styled.div`
@@ -14,9 +14,9 @@ const StyledRow = styled.div`
  align-items: center;
  display: flex;
  gap: ${themeCssVariables.spacing[2]};
+  padding: 0 ${themeCssVariables.spacing[2]};
  position: relative;
  width: 100%;
-  padding: 0 ${themeCssVariables.spacing[2]};
 `;

 const StyledFieldName = styled.div`
@@ -23,14 +23,14 @@ type SettingsDataModelOverviewObjectProps =

 const StyledNode = styled.div`
  background-color: ${themeCssVariables.background.secondary};
+  border: 1px solid ${themeCssVariables.border.color.medium};
  border-radius: ${themeCssVariables.border.radius.md};
+  box-shadow: ${themeCssVariables.boxShadow.light};
  display: flex;
  flex-direction: column;
-  width: 220px;
-  padding: ${themeCssVariables.spacing[2]};
  gap: ${themeCssVariables.spacing[2]};
-  border: 1px solid ${themeCssVariables.border.color.medium};
-  box-shadow: ${themeCssVariables.boxShadow.light};
+  padding: ${themeCssVariables.spacing[2]};
+  width: 220px;
 `;

 const StyledHeader = styled.div`
@@ -50,30 +50,30 @@ const StyledObjectName = styled.div`
 `;

 const StyledInnerCard = styled.div`
-  border: 1px solid ${themeCssVariables.border.color.light};
  background-color: ${themeCssVariables.background.primary};
+  border: 1px solid ${themeCssVariables.border.color.light};
  border-radius: ${themeCssVariables.border.radius.sm};
-  padding: ${themeCssVariables.spacing[2]} 0 ${themeCssVariables.spacing[2]} 0;
+  color: ${themeCssVariables.font.color.tertiary};
  display: flex;
  flex-flow: column nowrap;
  gap: ${themeCssVariables.spacing['0.5']};
-  color: ${themeCssVariables.font.color.tertiary};
+  padding: ${themeCssVariables.spacing[2]} 0 ${themeCssVariables.spacing[2]} 0;
 `;

 const StyledCardRow = styled.div`
  align-items: center;
  display: flex;
-  height: 24px;
  gap: ${themeCssVariables.spacing[1]};
+  height: 24px;
 `;

 const StyledCardRowOther = styled.div`
  align-items: center;
  cursor: pointer;
  display: flex;
+  gap: ${themeCssVariables.spacing[2]};
  height: 24px;
  padding: 0 ${themeCssVariables.spacing[2]};
-  gap: ${themeCssVariables.spacing[2]};

  &:hover {
    background-color: ${themeCssVariables.background.tertiary};
@@ -89,10 +89,10 @@ const StyledObjectInstanceCount = styled.div`
 const StyledObjectLinkContainer = styled.div`
  > a {
    align-items: center;
+    color: ${themeCssVariables.font.color.primary};
    display: flex;
    gap: ${themeCssVariables.spacing[1]};
    text-decoration: none;
-    color: ${themeCssVariables.font.color.primary};

    &:hover {
      color: ${themeCssVariables.font.color.secondary};
@@ -40,27 +40,27 @@ export const OBJECT_FIELD_TABLE_ROW_GRID_TEMPLATE_COLUMNS =
  'minmax(0, 1fr) 148px 148px 36px';

 const StyledNameContainer = styled.div`
-  display: flex;
  align-items: center;
+  display: flex;
  flex: 1;
-  min-width: 0;
  gap: ${themeCssVariables.spacing[1]};
+  min-width: 0;
 `;

 const StyledNameLabel = styled.div`
-  white-space: nowrap;
-  text-overflow: ellipsis;
  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;

 const StyledInactiveLabel = styled.span`
  color: ${themeCssVariables.font.color.extraLight};
-  font-size: ${themeCssVariables.font.size.sm};
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
  flex: 0 999 auto;
+  font-size: ${themeCssVariables.font.size.sm};
  min-width: 48px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;

  &::before {
    content: '·';
@@ -24,27 +24,27 @@ export type SettingsObjectMetadataItemTableRowProps = {
 };

 const StyledNameContainer = styled.div`
-  display: flex;
  align-items: center;
+  display: flex;
  flex: 1;
-  min-width: 0;
  gap: ${themeCssVariables.spacing[1]};
+  min-width: 0;
 `;

 const StyledNameLabel = styled.div`
-  white-space: nowrap;
-  text-overflow: ellipsis;
  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;

 const StyledInactiveLabel = styled.span`
  color: ${themeCssVariables.font.color.extraLight};
-  font-size: ${themeCssVariables.font.size.sm};
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
  flex: 0 999 auto;
+  font-size: ${themeCssVariables.font.size.sm};
  min-width: 48px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;

  &::before {
    content: '·';
@@ -29,27 +29,27 @@ export const OBJECT_RELATION_TABLE_ROW_GRID_TEMPLATE_COLUMNS =
  'minmax(0, 1fr) 148px 148px 36px';

 const StyledNameContainer = styled.div`
-  display: flex;
  align-items: center;
+  display: flex;
  flex: 1;
-  min-width: 0;
  gap: ${themeCssVariables.spacing[1]};
+  min-width: 0;
 `;

 const StyledNameLabel = styled.div`
-  white-space: nowrap;
-  text-overflow: ellipsis;
  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;

 const StyledInactiveLabel = styled.span`
  color: ${themeCssVariables.font.color.extraLight};
-  font-size: ${themeCssVariables.font.size.sm};
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
  flex: 0 999 auto;
+  font-size: ${themeCssVariables.font.size.sm};
  min-width: 48px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;

  &::before {
    content: '·';
@@ -77,11 +77,11 @@ const StyledLinkContainer = styled.div`

  > a {
    color: ${themeCssVariables.font.color.primary};
+    overflow: hidden;
    text-decoration: underline;
    text-decoration-color: ${themeCssVariables.border.color.strong};
-    text-underline-offset: 2px;
-    overflow: hidden;
    text-overflow: ellipsis;
+    text-underline-offset: 2px;
    white-space: nowrap;

    &:hover {
@@ -17,10 +17,10 @@ const StyledCoverImageContainer = styled.div`
  border-radius: ${themeCssVariables.border.radius.md};
  box-sizing: border-box;
  display: flex;
-  min-height: 153px;
  justify-content: center;
-  position: relative;
  margin-bottom: ${themeCssVariables.spacing[8]};
+  min-height: 153px;
+  position: relative;
 `;

 const StyledButtonContainer = styled.div`
@@ -48,10 +48,10 @@ const StyledInputContainer = styled.div`

 const StyledAdvancedSettingsSectionInputWrapper = styled.div`
  display: flex;
+  flex: 1;
  flex-direction: column;
  gap: ${themeCssVariables.spacing[4]};
  width: 100%;
-  flex: 1;
 `;

 const StyledAdvancedSettingsOuterContainer = styled.div`
@@ -86,8 +86,8 @@ const StyledConflictBanner = styled.div`
 const StyledBannerContent = styled.div`
  align-items: center;
  display: flex;
-  gap: ${themeCssVariables.spacing[2]};
  flex: 1;
+  gap: ${themeCssVariables.spacing[2]};
 `;

 const StyledBannerText = styled.span`
@@ -11,9 +11,9 @@ import { ThemeContext } from 'twenty-ui/theme-constants';
 import { type ApiKey } from '~/generated-metadata/graphql';

 const StyledEllipsisLabel = styled.div`
-  white-space: nowrap;
-  text-overflow: ellipsis;
  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;

 type ApiKeyType = Pick<ApiKey, 'id' | 'name' | 'expiresAt' | 'revokedAt'> & {
@@ -16,10 +16,10 @@ const StyledCardGrid = styled.div`

 const StyledImage = styled.img`
  border-bottom: 1px solid ${themeCssVariables.border.color.medium};
-  height: 120px;
-  width: 100%;
-  object-fit: cover;
  display: flex;
+  height: 120px;
+  object-fit: cover;
+  width: 100%;
 `;

 export const SettingsLabContent = () => {
@@ -5,10 +5,10 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledHeaderTitle = styled.div`
  color: ${themeCssVariables.font.color.primary};
-  font-weight: ${themeCssVariables.font.weight.semiBold};
  font-size: ${themeCssVariables.font.size.lg};
-  width: fit-content;
+  font-weight: ${themeCssVariables.font.weight.semiBold};
  max-width: 420px;
+  width: fit-content;
  & > input:disabled {
    color: ${themeCssVariables.font.color.primary};
  }
@@ -27,10 +27,10 @@ const playgroundSetupFormSchema = z.object({
 type PlaygroundSetupFormValues = z.infer<typeof playgroundSetupFormSchema>;

 const StyledForm = styled.form`
-  display: grid;
-  grid-template-columns: 1.5fr 1fr 1fr 0.5fr;
  align-items: end;
+  display: grid;
  gap: ${themeCssVariables.spacing[2]};
+  grid-template-columns: 1.5fr 1fr 1fr 0.5fr;
  margin-bottom: ${themeCssVariables.spacing[2]};
  width: 100%;
 `;
@@ -30,8 +30,8 @@ const StyledContainer = styled.div`

  .scalar-app .text-pretty {
    overflow-wrap: break-word;
-    word-break: normal;
    white-space: normal;
+    word-break: normal;
  }
 `;

@@ -13,9 +13,9 @@ const StyledCoverContainer = styled.div`
  display: flex;
  height: 153px;
  justify-content: center;
-  position: relative;
-  margin-top: ${themeCssVariables.spacing[4]};
  margin-bottom: ${themeCssVariables.spacing[4]};
+  margin-top: ${themeCssVariables.spacing[4]};
+  position: relative;
 `;

 type StyledSettingsApiPlaygroundCoverImageProps = {
@@ -17,14 +17,14 @@ const StyledContainer = styled.div`
 `;

 const StyledFieldRow = styled.div`
-  display: flex;
  align-items: stretch;
+  display: flex;
  gap: ${themeCssVariables.spacing[2]};
 `;

 const StyledActionWrapper = styled.div`
-  display: flex;
  align-items: stretch;
+  display: flex;

  & > button + button {
    border-left: none;
@@ -32,9 +32,9 @@ const StyledActionWrapper = styled.div`
 `;

 const StyledActionButtonContainer = styled.div`
-  height: 100%;
-  display: inline-flex;
  align-items: center;
+  display: inline-flex;
+  height: 100%;
  justify-content: center;
 `;

@@ -32,8 +32,8 @@ const StyledCreateRoleSectionContainer = styled.div`
    border-top: 1px solid ${themeCssVariables.border.color.light};
    display: flex;
    justify-content: flex-end;
-    padding-top: ${themeCssVariables.spacing[2]};
    padding-bottom: ${themeCssVariables.spacing[2]};
+    padding-top: ${themeCssVariables.spacing[2]};
  }
 `;

@@ -21,8 +21,8 @@ const StyledLoadingContainer = styled.div`
 `;

 const StyledDropdownItem = styled.div`
-  padding: ${themeCssVariables.spacing[2]};
  cursor: pointer;
+  padding: ${themeCssVariables.spacing[2]};

  &:hover {
    background-color: ${themeCssVariables.background.transparent.lighter};
@@ -33,8 +33,8 @@ const StyledNameCell = styled.div`
 const StyledNameContainer = styled.div`
  align-items: center;
  display: flex;
-  overflow: hidden;
  gap: ${themeCssVariables.spacing[2]};
+  overflow: hidden;
  width: 100%;
 `;

@@ -22,9 +22,9 @@ const StyledTypeSelectContainer = styled.div`

 const StyledContainer = styled.div`
  display: flex;
+  flex-wrap: wrap;
  gap: ${themeCssVariables.spacing[2]};
  justify-content: flex-start;
-  flex-wrap: wrap;
  width: 100%;
 `;

@@ -23,8 +23,8 @@ const StyledCreateObjectOverrideSectionContainer = styled.div`
    border-top: 1px solid ${themeCssVariables.border.color.light};
    display: flex;
    justify-content: flex-end;
-    padding-top: ${themeCssVariables.spacing[2]};
    padding-bottom: ${themeCssVariables.spacing[2]};
+    padding-top: ${themeCssVariables.spacing[2]};
  }
 `;

@@ -14,9 +14,9 @@ import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledNameLabel = styled.div`
-  white-space: nowrap;
-  text-overflow: ellipsis;
  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;

 type SettingsRolePermissionsObjectLevelTableRowProps = {
@@ -24,11 +24,11 @@ export const FIELD_PERMISSION_TABLE_ROW_GRID_TEMPLATE_COLUMNS =
  '180px minmax(0, 1fr) 60px 60px';

 const StyledNameLabel = styled.div`
-  white-space: nowrap;
-  text-overflow: ellipsis;
  overflow: hidden;
-
+  text-overflow: ellipsis;
  user-select: none;
+
+  white-space: nowrap;
 `;

 type SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRowProps = {
@@ -14,9 +14,9 @@ import { SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput } fro
 import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledFilterRow = styled.div`
+  align-items: center;
  display: flex;
  flex-direction: row;
-  align-items: center;
  gap: ${themeCssVariables.spacing[2]};
 `;

@@ -24,9 +24,9 @@ const StyledText = styled.div`

 const StyledContainer = styled.div`
  align-items: start;
+  color: ${themeCssVariables.font.color.tertiary};
  display: flex;
  min-width: ${themeCssVariables.spacing[16]};
-  color: ${themeCssVariables.font.color.tertiary};
 `;

 type SettingsRolePermissionsObjectLevelRecordLevelPermissionLogicalOperatorCellProps =
@@ -37,16 +37,16 @@ const StyledContainer = styled.div`

 const StyledIconContainer = styled.div`
  align-items: center;
+  background-color: ${themeCssVariables.background.transparent.lighter};
+  border: 1px solid ${themeCssVariables.border.color.medium};
+  border-bottom-right-radius: ${themeCssVariables.border.radius.sm};
+  border-left: none;
+  border-top-right-radius: ${themeCssVariables.border.radius.sm};
+  color: ${themeCssVariables.font.color.tertiary};
+  cursor: pointer;
  display: flex;
  justify-content: center;
-  background-color: ${themeCssVariables.background.transparent.lighter};
-  border-top-right-radius: ${themeCssVariables.border.radius.sm};
-  border-bottom-right-radius: ${themeCssVariables.border.radius.sm};
-  border: 1px solid ${themeCssVariables.border.color.medium};
-  border-left: none;
-  cursor: pointer;
  padding: ${themeCssVariables.spacing[2]};
-  color: ${themeCssVariables.font.color.tertiary};

  &:hover {
    background-color: ${themeCssVariables.background.transparent.light};
@@ -54,20 +54,20 @@ const StyledIconContainer = styled.div`
 `;

 const StyledReadOnlyInput = styled.div`
-  display: flex;
  align-items: center;
-  flex: 1;
-  padding: ${themeCssVariables.spacing[2]};
-  border: 1px solid ${themeCssVariables.border.color.medium};
-  border-top-left-radius: ${themeCssVariables.border.radius.sm};
-  border-bottom-left-radius: ${themeCssVariables.border.radius.sm};
  background-color: ${themeCssVariables.background.secondary};
-  color: ${themeCssVariables.font.color.primary};
-  font-size: ${themeCssVariables.font.size.md};
-  height: 32px;
+  border: 1px solid ${themeCssVariables.border.color.medium};
+  border-bottom-left-radius: ${themeCssVariables.border.radius.sm};
+  border-top-left-radius: ${themeCssVariables.border.radius.sm};
  box-sizing: border-box;
+  color: ${themeCssVariables.font.color.primary};
+  display: flex;
+  flex: 1;
+  font-size: ${themeCssVariables.font.size.md};
  gap: ${themeCssVariables.spacing[1]};
+  height: 32px;
  overflow: hidden;
+  padding: ${themeCssVariables.spacing[2]};
 `;

 const StyledMeText = styled.span`
@@ -76,10 +76,10 @@ const StyledMeText = styled.span`
 `;

 const StyledFieldLabel = styled.span`
-  white-space: nowrap;
+  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
-  min-width: 0;
+  white-space: nowrap;
 `;

 const StyledFormFieldInputWrapper = styled.div`
@@ -14,15 +14,13 @@ const StyledRecordLevelPermissionPickerContainer = styled.div<{
  readonly?: boolean;
 }>`
  align-items: center;
-  display: flex;
-  justify-content: center;
-
  background-color: ${({ multiline }) =>
    multiline
      ? 'transparent'
      : themeCssVariables.background.transparent.lighter};
  border: ${({ multiline }) =>
    multiline ? 'none' : `1px solid ${themeCssVariables.border.color.medium}`};
+
  border-bottom-right-radius: ${({ multiline }) =>
    multiline ? '0' : themeCssVariables.border.radius.sm};
  border-radius: ${({ multiline }) =>
@@ -34,6 +32,8 @@ const StyledRecordLevelPermissionPickerContainer = styled.div<{
      ? themeCssVariables.font.color.primary
      : themeCssVariables.font.color.tertiary};
  cursor: ${({ multiline }) => (multiline ? 'default' : 'pointer')};
+  display: flex;
+  justify-content: center;
  padding: ${({ multiline }) =>
    multiline
      ? `${themeCssVariables.spacing['0.5']} ${themeCssVariables.spacing[0]}`
@@ -31,9 +31,9 @@ const StyledIconWrapper = styled.div<{ isRevoked?: boolean }>`

 const StyledIcon = styled.div<{ isRevoked?: boolean }>`
  align-items: center;
-  display: flex;
  color: ${({ isRevoked }) =>
    isRevoked ? themeCssVariables.color.orange : themeCssVariables.color.blue};
+  display: flex;
  justify-content: center;
 `;

@@ -19,8 +19,8 @@ const StyledDescription = styled.span`
 `;

 const StyledIconContainer = styled.div`
-  display: flex;
  align-items: center;
+  display: flex;
  justify-content: center;
 `;

@@ -10,14 +10,14 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';

 const StyledCheckboxContainer = styled.div<{ disabled: boolean }>`
-  display: flex;
  align-items: center;
+  border-radius: ${themeCssVariables.border.radius.sm};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
  justify-content: space-between;
  padding: ${themeCssVariables.spacing[1]};
-  border-radius: ${themeCssVariables.border.radius.sm};
  transition: background-color
    calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};

  &:hover {
    background-color: ${themeCssVariables.background.transparent.light};
@@ -25,8 +25,8 @@ const StyledCheckboxContainer = styled.div<{ disabled: boolean }>`
 `;

 const StyledCheckboxLabel = styled.div`
-  display: flex;
  align-items: center;
+  display: flex;
  gap: ${themeCssVariables.spacing[1]};
 `;

@@ -19,8 +19,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledInputsContainer = styled.div`
  display: flex;
  gap: ${themeCssVariables.spacing[2]};
-  width: 100%;
  margin-bottom: ${themeCssVariables.spacing[2]};
+  width: 100%;
 `;

 const StyledInputContainer = styled.div`
@@ -8,10 +8,10 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledHeaderTitle = styled.div`
  color: ${themeCssVariables.font.color.primary};
-  font-weight: ${themeCssVariables.font.weight.semiBold};
  font-size: ${themeCssVariables.font.size.lg};
-  width: fit-content;
+  font-weight: ${themeCssVariables.font.weight.semiBold};
  max-width: 420px;
+  width: fit-content;
  & > input:disabled {
    color: ${themeCssVariables.font.color.primary};
  }
@@ -18,8 +18,8 @@ import { IdentityProviderType } from '~/generated-metadata/graphql';
 const StyledInputsContainer = styled.div`
  display: grid;
  gap: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[4]};
-  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'input-1 input-1';
+  grid-template-columns: 1fr 1fr;

  & :first-of-type {
    grid-area: input-1;
@@ -2,10 +2,10 @@ import { styled } from '@linaria/react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledDashContainer = styled.div`
-  display: flex;
-  width: ${themeCssVariables.spacing[2]};
-  justify-content: center;
  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: ${themeCssVariables.spacing[2]};
 `;

 const StyledDash = styled.div`
@@ -3,32 +3,32 @@ import { type SlotProps } from 'input-otp';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledSlot = styled.div<{ isActive: boolean }>`
-  position: relative;
-  width: 24px;
-  height: 32px;
-  font-size: ${themeCssVariables.font.size.md};
-  display: flex;
  align-items: center;
-  justify-content: center;
-  transition: all 0.3s;
  background-color: ${themeCssVariables.background.transparent.lighter};
  border: 1px solid ${themeCssVariables.border.color.medium};
  border-radius: ${themeCssVariables.border.radius.sm};
+  display: flex;
+  font-size: ${themeCssVariables.font.size.md};
+  height: 32px;
+  justify-content: center;
+  outline: 0;
+  outline-color: ${({ isActive }) =>
+    isActive
+      ? themeCssVariables.border.color.strong
+      : themeCssVariables.border.color.medium};
+  outline-color: ${themeCssVariables.border.color.medium};

  .group:hover &,
  .group:focus-within & {
    border-color: ${themeCssVariables.border.color.medium};
  }

-  outline: 0;
-  outline-color: ${themeCssVariables.border.color.medium};
-
-  outline-color: ${({ isActive }) =>
-    isActive
-      ? themeCssVariables.border.color.strong
-      : themeCssVariables.border.color.medium};
  outline-style: ${({ isActive }) => (isActive ? 'solid' : 'none')};
  outline-width: ${({ isActive }) => (isActive ? '1px' : '0')};
+
+  position: relative;
+  transition: all 0.3s;
+  width: 24px;
 `;

 const StyledCaretContainer = styled.div`
@@ -60,9 +60,9 @@ const StyledInputChar = styled.div`
 `;

 const StyledCaret = styled.div`
-  width: 1px;
-  height: 20px;
  background-color: ${themeCssVariables.font.color.primary};
+  height: 20px;
+  width: 1px;
 `;

 type TwoFactorAuthenticationVerificationCodeSlotProps = SlotProps;