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
@@ -12,8 +12,8 @@ import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
 const StyledContainer = styled.div`
  display: flex;
-  flex-direction: column;
  flex: 1;
+  flex-direction: column;
 `;

 const StyledCodeEditorWrapper = styled.div`
@@ -31,7 +31,6 @@ const StyledInfoContainer = styled.div`

 const StyledOutput = styled.div<{ accent?: OutputAccent }>`
  align-items: center;
-  gap: ${themeCssVariables.spacing[1]};
  color: ${({ accent }) =>
    accent === 'success'
      ? themeCssVariables.color.turquoise
@@ -39,13 +38,14 @@ const StyledOutput = styled.div<{ accent?: OutputAccent }>`
        ? themeCssVariables.color.red
        : themeCssVariables.font.color.secondary};
  display: flex;
+  gap: ${themeCssVariables.spacing[1]};
 `;

 const StyledStatusInfo = styled.div`
-  display: flex;
-  gap: ${themeCssVariables.spacing[2]};
-  font-size: ${themeCssVariables.font.size.sm};
  color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
+  font-size: ${themeCssVariables.font.size.sm};
+  gap: ${themeCssVariables.spacing[2]};
 `;

 export type ExecutionStatus = {
@@ -65,9 +65,9 @@ import { Tag, type TagColor } from 'twenty-ui/components';
 import { useStore } from 'jotai';
 import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
 const StyledResetReactflowStyles = styled.div`
-  height: 100%;
-  width: 100%;
-  position: relative;
+  --xy-node-background-color: none;
+  --xy-node-border: none;
+  --xy-node-border-radius: none;

  /* Below we reset the default styling of Reactflow */
  .react-flow__node-input,
@@ -75,23 +75,23 @@ const StyledResetReactflowStyles = styled.div`
  .react-flow__node-output,
  .react-flow__node-group {
    padding: 0;
-    width: auto;
    text-align: start;
    white-space: nowrap;
+    width: auto;
  }

-  --xy-node-border-radius: none;
-  --xy-node-border: none;
-  --xy-node-background-color: none;
  --xy-node-boxshadow-hover: none;
  --xy-node-boxshadow-selected: none;
+  height: 100%;
+  position: relative;
+  width: 100%;
 `;

 const StyledStatusTagContainer = styled.div`
  left: 0;
-  top: 0;
-  position: absolute;
  padding: ${themeCssVariables.spacing[4]};
+  position: absolute;
+  top: 0;
 `;

 const defaultFitViewOptions = {
@@ -15,8 +15,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div<{ x: number; y: number }>`
  background: ${themeCssVariables.background.primary};
-  box-shadow: ${themeCssVariables.boxShadow.strong};
  border-radius: ${themeCssVariables.spacing[2]};
+  box-shadow: ${themeCssVariables.boxShadow.strong};
  display: flex;
  flex-direction: column;
  gap: ${themeCssVariables.spacing[0.5]};
@@ -10,8 +10,6 @@ const StyledWorkflowDiagramEdgeLabelContainer = styled.div<{
  centerY?: number;
 }>`
  position: absolute;
-  width: fit-content;
-
  transform: ${({ position, sourceX, sourceY, centerX, centerY }) => {
    if (isDefined(centerX) && isDefined(centerY)) {
      return `translate(-50%, -50%) translate(${centerX}px, ${centerY}px)`;
@@ -25,6 +23,8 @@ const StyledWorkflowDiagramEdgeLabelContainer = styled.div<{
        return 'none';
    }
  }};
+
+  width: fit-content;
 `;

 export { StyledWorkflowDiagramEdgeLabelContainer as WorkflowDiagramEdgeLabelContainer };
@@ -4,9 +4,9 @@ import { styled } from '@linaria/react';
 const StyledContainer = styled.div<{ labelX: number; labelY: number }>`
  padding: ${themeCssVariables.spacing[1]};
  pointer-events: all;
+  position: absolute;
  transform: ${({ labelX, labelY }) =>
    `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`};
-  position: absolute;
 `;

 export { StyledContainer as WorkflowDiagramEdgeV2Container };
@@ -11,28 +11,28 @@ const HANDLE_SCALE_ON_HOVER = 1.5;

 const StyledHandleContainer = styled.div`
  & .react-flow__handle {
-    height: ${NODE_HANDLE_HEIGHT_PX}px;
-    width: ${NODE_HANDLE_WIDTH_PX}px;
-    opacity: var(--handle-opacity, 1);
    background: var(--handle-bg);
    border-color: var(--handle-border-color);
+    height: ${NODE_HANDLE_HEIGHT_PX}px;
+    opacity: var(--handle-opacity, 1);
    transform: var(--handle-transform);
    transform-origin: var(--handle-transform-origin);
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: calc(100% + ${themeCssVariables.spacing[4]});
-      height: calc(100% + ${themeCssVariables.spacing[4]});
-    }
-
    transition:
      transform 0.1s ease-out,
      background 0.1s,
      border-color 0.1s;
+
+    &::after {
+      content: '';
+      height: calc(100% + ${themeCssVariables.spacing[4]});
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: calc(100% + ${themeCssVariables.spacing[4]});
+    }
+
+    width: ${NODE_HANDLE_WIDTH_PX}px;
    z-index: 1;

    &.connectionindicator {
@@ -9,14 +9,14 @@ type WorkflowDiagramHandleTargetProps = {

 const StyledHandleContainer = styled.div`
  & .react-flow__handle {
-    opacity: 0;
-    z-index: 1;
    border-radius: ${themeCssVariables.border.radius.md};
-    width: 100%;
    height: 100%;
    left: 0;
+    opacity: 0;
    top: 0;
    transform: translate(-1px, -5px);
+    width: 100%;
+    z-index: 1;

    &.connectionindicator {
      cursor: pointer;
@@ -28,14 +28,14 @@ import { capitalize, isDefined } from 'twenty-shared/utils';
 const StyledAddStepButtonContainer = styled.div<{
  shouldDisplay: boolean;
 }>`
-  display: flex;
  align-items: center;
-  position: absolute;
-  justify-content: center;
-  flex-direction: column;
-  opacity: ${({ shouldDisplay }) => (shouldDisplay ? 1 : 0)};
-  left: 50%;
  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: 50%;
+  opacity: ${({ shouldDisplay }) => (shouldDisplay ? 1 : 0)};
+  position: absolute;
  transform: translateX(-50%) translateY(100%);
 `;

@@ -9,30 +9,30 @@ const StyledNodeContainer = styled.div<{
  selected: boolean;
 }>`
  align-items: center;
-  display: flex;
-  gap: ${themeCssVariables.spacing[2]};
-  max-width: 240px;
-  min-width: 44px;
-  padding: ${themeCssVariables.spacing[2]};
-  border-radius: ${themeCssVariables.border.radius.md};
-  border-width: 1px;
-  border-style: solid;
-  box-sizing: border-box;
-  cursor: pointer;
-  position: relative;
-  transition: border-color 0.1s;
-
  background: ${({ runStatus, selected }) => {
    const colors = getWorkflowDiagramColors({ runStatus });
    return selected ? colors.selected.background : colors.unselected.background;
  }};
-
  border-color: ${({ runStatus, selected }) => {
    const colors = getWorkflowDiagramColors({ runStatus });
    return selected
      ? colors.selected.borderColor
      : colors.unselected.borderColor;
  }};
+  border-radius: ${themeCssVariables.border.radius.md};
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  gap: ${themeCssVariables.spacing[2]};
+  max-width: 240px;
+  min-width: 44px;
+  padding: ${themeCssVariables.spacing[2]};
+
+  position: relative;
+
+  transition: border-color 0.1s;

  &:hover {
    background: ${({ runStatus, selected }) => {
@@ -3,10 +3,10 @@ import { styled } from '@linaria/react';
 const StyledNodeLabelWithCounterPart = styled.div`
  align-items: center;
  align-self: stretch;
+  box-sizing: border-box;
  display: flex;
  height: 14px;
  justify-content: space-between;
-  box-sizing: border-box;
 `;

 export { StyledNodeLabelWithCounterPart as WorkflowNodeLabelWithCounterPart };
@@ -3,11 +3,11 @@ import { styled } from '@linaria/react';
 const StyledNodeRightPart = styled.div`
  align-items: flex-start;
  align-self: stretch;
+  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 184px;
-  box-sizing: border-box;
 `;

 export { StyledNodeRightPart as WorkflowNodeRightPart };
@@ -35,32 +35,32 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledNodeLabelWithCounterPart = styled.div`
  align-items: center;
  align-self: stretch;
+  box-sizing: border-box;
+  column-gap: ${themeCssVariables.spacing[2]};
  display: flex;
  height: 14px;
  justify-content: space-between;
-  box-sizing: border-box;
-  column-gap: ${themeCssVariables.spacing[2]};
 `;

 const StyledStatusIconsContainer = styled.div`
  align-items: center;
+  box-sizing: border-box;
  display: flex;
  gap: ${themeCssVariables.spacing[1]};
  justify-content: flex-end;
-  box-sizing: border-box;
 `;

 const StyledColorIcon = styled.div<{
  color: string;
 }>`
  align-items: center;
+  background: ${({ color }) => color};
  border-radius: ${themeCssVariables.border.radius.sm};
  box-sizing: border-box;
  display: flex;
  height: 14px;
  justify-content: center;
  width: 14px;
-  background: ${({ color }) => color};
 `;

 const StyledIterationCounter = styled.div<{
@@ -5,10 +5,10 @@ const StyledSelectStepTitle = styled.span`
  color: ${themeCssVariables.font.color.tertiary};
  font-size: ${themeCssVariables.font.size.sm};
  font-weight: ${themeCssVariables.font.weight.medium};
-  padding-top: ${themeCssVariables.spacing[2]};
  padding-bottom: ${themeCssVariables.spacing[1]};
  padding-left: ${themeCssVariables.spacing[1]};
  padding-right: ${themeCssVariables.spacing[1]};
+  padding-top: ${themeCssVariables.spacing[2]};
 `;

 export { StyledSelectStepTitle as SidePanelWorkflowSelectStepTitle };
@@ -16,6 +16,7 @@ const StyledWorkflowStepBody = styled.div<{
  display: ${({ display }) => display ?? 'flex'};
  flex: 1 1 auto;
  flex-direction: column;
+  grid-template-rows: ${({ gridTemplateRows }) => gridTemplateRows ?? 'none'};
  height: 100%;
  overflow: ${({ overflow }) => overflow ?? 'hidden scroll'};
  padding-block: ${({ paddingBlock }) =>
@@ -23,7 +24,6 @@ const StyledWorkflowStepBody = styled.div<{
  padding-inline: ${({ paddingInline }) =>
    paddingInline ?? themeCssVariables.spacing[3]};
  row-gap: ${({ rowGap }) => rowGap ?? themeCssVariables.spacing[4]};
-  grid-template-rows: ${({ gridTemplateRows }) => gridTemplateRows ?? 'none'};
 `;

 export const WorkflowStepBody = ({
@@ -22,8 +22,8 @@ type WorkflowStepFilterColumnProps = {
 const StyledContainer = styled.div`
  display: flex;
  flex-direction: row;
-  justify-content: space-between;
  gap: ${themeCssVariables.spacing[1]};
+  justify-content: space-between;
 `;

 export const WorkflowStepFilterColumn = ({
@@ -17,8 +17,8 @@ type WorkflowStepFilterGroupColumnProps = {
 const StyledContainer = styled.div`
  display: flex;
  flex-direction: row;
-  justify-content: space-between;
  gap: ${themeCssVariables.spacing[1]};
+  justify-content: space-between;
 `;

 export const WorkflowStepFilterGroupColumn = ({
@@ -25,9 +25,9 @@ const StyledNumber = styled.span`

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

 type WorkflowStepFilterLogicalOperatorCellProps = {
@@ -20,15 +20,15 @@ export const StyledLabel = ({ children }: { children: React.ReactNode }) => (

 export const StyledRow = styled.div<{ isDisabled?: boolean }>`
  align-items: center;
+  border-radius: ${themeCssVariables.spacing[1]};
+  box-sizing: border-box;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
  display: flex;
  justify-content: space-between;
-  width: 100%;
-  padding: ${themeCssVariables.spacing[1]};
-  box-sizing: border-box;
-  border-radius: ${themeCssVariables.spacing[1]};
-  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
  opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};
+  padding: ${themeCssVariables.spacing[1]};
  pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')};
+  width: 100%;

  :hover {
    background-color: ${({ isDisabled }) =>
@@ -59,13 +59,13 @@ export const StyledList = styled.div`
 `;

 export const StyledIconContainer = styled.div`
+  align-items: center;
  background-color: ${themeCssVariables.background.tertiary};
-  padding: ${themeCssVariables.spacing[1]};
  border-radius: ${themeCssVariables.spacing[1]};
+  color: ${themeCssVariables.font.color.tertiary};
  display: flex;
  justify-content: center;
-  align-items: center;
-  color: ${themeCssVariables.font.color.tertiary};
+  padding: ${themeCssVariables.spacing[1]};
 `;

 const StyledIconChevronRightWrapper = styled.div`
@@ -27,14 +27,14 @@ import { WorkflowAiAgentPermissionsObjectsList } from './WorkflowAiAgentPermissi
 import { getFilteredPermissions } from './workflowAiAgentPermissions.utils';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledSearchInputContainer = styled.div`
-  width: 100%;
-  height: 40px;
  border-block: 1px solid ${themeCssVariables.border.color.medium};
+  height: 40px;
+  width: 100%;
  & input {
-    height: 40px;
-    line-height: 40px;
    border: none;
    border-radius: 0;
+    height: 40px;
+    line-height: 40px;
    width: 100%;
  }
 `;
@@ -44,7 +44,6 @@ const StyledBackButtonText = styled.span`
 `;

 const StyledBackButton = styled.button`
-  width: 100%;
  align-items: center;
  background: none;
  border: none;
@@ -54,6 +53,7 @@ const StyledBackButton = styled.button`
  gap: ${themeCssVariables.spacing[1]};
  padding: ${themeCssVariables.spacing[3]};
  text-align: left;
+  width: 100%;

  &:hover {
    color: ${themeCssVariables.font.color.primary};
@@ -48,10 +48,10 @@ const StyledSettingsHeader = styled.div`
  border-bottom: 1px solid ${themeCssVariables.border.color.light};
  display: grid;
  gap: ${themeCssVariables.spacing[1]};
-  padding-right: ${themeCssVariables.spacing[2]};
-  padding-left: ${themeCssVariables.spacing[3]};
  grid-template-columns: 1fr 24px;
  padding-bottom: ${themeCssVariables.spacing[2]};
+  padding-left: ${themeCssVariables.spacing[3]};
+  padding-right: ${themeCssVariables.spacing[2]};
 `;

 const StyledTitleContainer = styled.div`
@@ -68,6 +68,7 @@ const StyledCloseButtonContainer = styled.div`

 const StyledAddFieldButton = styled.button`
  align-items: center;
+  background-color: ${themeCssVariables.background.transparent.lighter};
  border: 1px solid ${themeCssVariables.border.color.light};
  border-radius: ${themeCssVariables.border.radius.sm};
  color: ${themeCssVariables.font.color.secondary};
@@ -80,7 +81,6 @@ const StyledAddFieldButton = styled.button`
  margin-top: ${themeCssVariables.spacing[2]};
  padding: ${themeCssVariables.spacing[2]};
  width: 100%;
-  background-color: ${themeCssVariables.background.transparent.lighter};

  &:hover {
    background-color: ${themeCssVariables.background.transparent.light};
@@ -88,12 +88,12 @@ const StyledAddFieldButton = styled.button`
 `;

 const StyledMessageContentContainer = styled.div`
-  flex-direction: column;
  color: ${themeCssVariables.font.color.secondary};
  display: flex;
+  flex-direction: column;
  gap: ${themeCssVariables.spacing[4]};
-  padding: ${themeCssVariables.spacing[4]};
  line-height: normal;
+  padding: ${themeCssVariables.spacing[4]};
 `;

 const StyledMessageDescription = styled.div`
@@ -11,17 +11,17 @@ const CODE_EDITOR_MIN_HEIGHT = 343;

 const StyledCodeEditorContainer = styled.div`
  display: flex;
-  flex-direction: column;
-  position: relative;
  flex: 1;
+  flex-direction: column;
  min-height: ${CODE_EDITOR_MIN_HEIGHT}px;
  overflow: hidden;
+  position: relative;
 `;

 const StyledFullScreenButtonContainer = styled.div`
  position: absolute;
-  top: ${themeCssVariables.spacing[2]};
  right: ${themeCssVariables.spacing[2]};
+  top: ${themeCssVariables.spacing[2]};
  z-index: 1;
 `;

@@ -10,8 +10,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div<{ fullWidth?: boolean }>`
  display: flex;
-  gap: ${themeCssVariables.spacing[3]};
  flex-wrap: wrap;
+  gap: ${themeCssVariables.spacing[3]};

  > * {
    flex: 1;
@@ -61,10 +61,10 @@ const StyledFormFieldContainer = styled.div`
 `;

 const StyledDraggingIndicator = styled.div`
-  position: absolute;
-  inset: -8px;
-  top: -4px;
  background-color: ${themeCssVariables.background.transparent.light};
+  inset: -8px;
+  position: absolute;
+  top: -4px;
 `;

 const StyledGripButtonContainer = styled.div`
@@ -95,13 +95,13 @@ const StyledFieldContainer = styled.div<{
  align-items: center;
  background: transparent;
  border: none;
+  cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
  display: flex;
  font-family: inherit;
  padding-left: ${themeCssVariables.spacing[2]};
  padding-right: ${themeCssVariables.spacing[2]};
-  width: 100%;

-  cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
+  width: 100%;

  &:hover,
  &[data-open='true'] {
@@ -39,10 +39,10 @@ const StyledSettingsHeader = styled.div`
  border-bottom: 1px solid ${themeCssVariables.border.color.light};
  display: grid;
  gap: ${themeCssVariables.spacing[1]};
-  padding-right: ${themeCssVariables.spacing[2]};
-  padding-left: ${themeCssVariables.spacing[3]};
  grid-template-columns: 1fr 24px;
  padding-bottom: ${themeCssVariables.spacing[2]};
+  padding-left: ${themeCssVariables.spacing[3]};
+  padding-right: ${themeCssVariables.spacing[2]};
 `;

 const StyledTitleContainer = styled.div`
@@ -46,8 +46,8 @@ const StyledTabListContainer = styled.div`

 const StyledTestTabContent = styled.div`
  display: flex;
-  flex-direction: column;
  flex: 1;
+  flex-direction: column;
  gap: ${themeCssVariables.spacing[4]};
  height: 100%;
  min-height: 400px;
@@ -55,26 +55,26 @@ const StyledTestTabContent = styled.div`

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

 const StyledFullHeightFormRawJsonFieldInputContainer = styled.div`
-  flex: 1;
  display: flex;
+  flex: 1;
  flex-direction: column;

  & > div:last-child {
-    flex: 1;
    display: flex;
+    flex: 1;
    flex-direction: column;

    & > div {
      flex: 1;
-      max-height: none !important;
      height: 100%;
+      max-height: none !important;

      & > div {
        height: 100%;
@@ -14,8 +14,8 @@ import { IconButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div`
-  display: flex;
  align-items: center;
+  display: flex;
  justify-content: space-between;
  padding-block: ${themeCssVariables.spacing[2]};
  padding-inline: ${themeCssVariables.spacing[3]};
@@ -8,21 +8,21 @@ const StyledSearchVariablesDropdownContainer = styled.div<{
  isReadonly?: 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-radius: ${({ multiline }) =>
    multiline
      ? themeCssVariables.border.radius.sm
      : `0 ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0`};

-  border: ${({ multiline }) =>
-    multiline ? 'none' : `1px solid ${themeCssVariables.border.color.medium}`};
+  display: flex;
+
+  justify-content: center;

  padding: ${({ multiline }) =>
    multiline