diff --git a/.circleci/config.yml b/.circleci/config.yml index 97a5248888..98e5f9e4aa 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -43,7 +43,7 @@ aliases: jobs: checkout: docker: - - image: cimg/node:16.17-browsers + - image: cimg/node:20.9-browsers environment: FLOW_CONTEXT: Production steps: diff --git a/.nvmrc b/.nvmrc index d4b25d088c..48ef2c10ba 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16.16 +20.9 diff --git a/package.json b/package.json index d4b48acbc2..ce904c10bb 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "test-update-snapshots": "yarn test -u" }, "engines": { - "node": "~16" + "node": "~20" }, "devDependencies": { "@neos-project/eslint-config-neos": "^2.6.1", diff --git a/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.module.css b/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.module.css index 07f7920ccb..6cf3f2a136 100644 --- a/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.module.css +++ b/packages/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail/style.module.css @@ -1,8 +1,28 @@ .multiLineWithThumbnail__item { + display: grid; + grid-template-columns: auto 1fr; + column-gap: var(--spacing-Half); + align-items: start; box-sizing: content-box; background: var(--colors-ContrastDarkest); } +.multiLineWithThumbnail__item span { + grid-column: 2; + grid-row: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.multiLineWithThumbnail__secondaryLabel { + grid-row: 2; + } + + &.multiLineWithThumbnail__tertiaryLabel { + grid-row: 3; + } +} + .multiLineWithThumbnail__item--multiLine { line-height: 20px; } @@ -26,6 +46,8 @@ .multiLineWithThumbnail__image { width: calc(1.33 * (var(--spacing-GoldenUnit) + var(--spacing-Full))); height: calc(var(--spacing-GoldenUnit) + var(--spacing-Full)); + grid-column: 1; + grid-row: 1 / 4; object-fit: contain; background-color: #fff; background-size: 10px 10px; @@ -35,8 +57,7 @@ display: inline-block; vertical-align: middle; margin-left: calc(var(--spacing-Full) * -1); - margin-top: calc(var(--spacing-Half) * -1); - margin-bottom: calc(var(--spacing-Half) * -1); + align-self: center; } .multiLineWithThumbnail__item:hover .multiLineWithThumbnail__secondaryLabel,