From 6fbf62ac07786daf2305408555a61173508fdfeb Mon Sep 17 00:00:00 2001 From: Femke Reunes Date: Fri, 28 Aug 2026 15:35:24 +0200 Subject: [PATCH 1/3] ARC-3890: adjust sizing --- .../BlockObjectsGrid/BlockObjectsGrid.scss | 22 +++---------------- 1 file changed, 3 insertions(+), 19 deletions(-) diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss index 49db6a52..8b89c715 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss @@ -187,37 +187,21 @@ height: 2.2rem; font-size: 2.2rem; line-height: 1; - - @media (min-width: variables.$g-bp2) { - width: 2.4rem; - height: 2.4rem; - font-size: 2.4rem; - } } .c-block-objects-grid__tile-title { @include typography.sofia-pro-heading-sm($important: false); + font-size: 1.6rem; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + @include typography.truncate-after-x-lines(2); overflow: hidden; - - @media (min-width: variables.$g-bp2) { - font-size: 1.6rem; - } } .c-block-objects-grid__tile-maintainer { - font-size: 1.4rem; - font-weight: 400; + @include typography.sofia-pro-body-sm($important: false); line-height: 2rem; @include typography.truncate; - - @media (min-width: variables.$g-bp2) { - font-size: 1.6rem; - } } .c-block-objects-grid__footer { From 47ef4574e3d3a34c17b8aa2c5b32c8a160e68c67 Mon Sep 17 00:00:00 2001 From: Femke Reunes Date: Fri, 28 Aug 2026 15:45:37 +0200 Subject: [PATCH 2/3] ARC-3890: Fix 9/16 format --- .../BlockObjectsGrid/BlockObjectsGrid.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss index 8b89c715..1f594463 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss @@ -22,10 +22,10 @@ --c-objects-grid-gap: #{variables.$g-spacer-unit * 2}; // All tiles share this height (standard tiles are 1 column wide, fixed tiles 2), so every - // tile lines up regardless of type. The height is the width of a fixed (landscape) tile - // divided by the 16:9 aspect ratio it has to keep, so it scales with the grid width. - // Mobile: a single column, so a fixed tile is the full grid width. - --c-objects-grid-row-height: calc(100cqw * 9 / 16); + // tile lines up regardless of type. The height is derived from a standard tile's column + // width, scaled to the required 9:16 aspect ratio, so it scales with the grid width. + // Mobile: a single column, so a standard tile is the full grid width. + --c-objects-grid-row-height: calc(100cqw * 16 / 9); @media (min-width: variables.$g-bp2) { --c-objects-grid-columns: 3; @@ -33,15 +33,15 @@ --c-objects-grid-fixed-row-span: 1; --c-objects-grid-gap: #{variables.$g-spacer-unit * 4}; - // 3 columns: a fixed tile is 2 columns + 1 gap wide = (2 * 100cqw - gap) / 3. - --c-objects-grid-row-height: calc((2 * 100cqw - var(--c-objects-grid-gap)) / 3 * 9 / 16); + // 3 columns: a standard tile is (100cqw - 2 gaps) / 3 wide. + --c-objects-grid-row-height: calc((100cqw - 2 * var(--c-objects-grid-gap)) / 3 * 16 / 9); } @media (min-width: variables.$g-bp3) { --c-objects-grid-columns: 4; - // 4 columns: a fixed tile is 2 columns + 1 gap wide = (100cqw - gap) / 2. - --c-objects-grid-row-height: calc((100cqw - var(--c-objects-grid-gap)) / 2 * 9 / 16); + // 4 columns: a standard tile is (100cqw - 3 gaps) / 4 wide. + --c-objects-grid-row-height: calc((100cqw - 3 * var(--c-objects-grid-gap)) / 4 * 16 / 9); } .c-block-objects-grid__title { From 7b19a8c7e43f420bb9725353e43edf8fbe532066 Mon Sep 17 00:00:00 2001 From: Femke Reunes Date: Fri, 28 Aug 2026 16:19:11 +0200 Subject: [PATCH 3/3] ARC-3890: Fix 9/16 format for desktop --- .../blocks/BlockObjectsGrid/BlockObjectsGrid.scss | 14 +++++++++----- .../blocks/BlockObjectsGrid/BlockObjectsGrid.tsx | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss index 1f594463..c632d750 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.scss @@ -4,6 +4,8 @@ @use "../../../../shared/styles/mixins/focus" as focus; @use "../../../../shared/styles/mixins/animations" as animations; +$max-item-height: 37.6rem; + .c-block-objects-grid { // The grid is its own inline-size query container, so the row height below can be derived // from the actual width of the grid (100cqw) instead of a hardcoded height. The grid
    @@ -23,9 +25,11 @@ // All tiles share this height (standard tiles are 1 column wide, fixed tiles 2), so every // tile lines up regardless of type. The height is derived from a standard tile's column - // width, scaled to the required 9:16 aspect ratio, so it scales with the grid width. - // Mobile: a single column, so a standard tile is the full grid width. - --c-objects-grid-row-height: calc(100cqw * 16 / 9); + // width, scaled to the required aspect ratio, so it scales with the grid width — capped + // so tiles stop growing on very wide containers. + // Mobile: a single column, so a standard tile is the full grid width and is landscape + // (16:9) instead of portrait; a fixed tile spans 2 rows to become twice as high + the gap. + --c-objects-grid-row-height: min(calc(100cqw * 9 / 16), #{$max-item-height}); @media (min-width: variables.$g-bp2) { --c-objects-grid-columns: 3; @@ -34,14 +38,14 @@ --c-objects-grid-gap: #{variables.$g-spacer-unit * 4}; // 3 columns: a standard tile is (100cqw - 2 gaps) / 3 wide. - --c-objects-grid-row-height: calc((100cqw - 2 * var(--c-objects-grid-gap)) / 3 * 16 / 9); + --c-objects-grid-row-height: min(calc((100cqw - 2 * var(--c-objects-grid-gap)) / 3 * 16 / 9), #{$max-item-height}); } @media (min-width: variables.$g-bp3) { --c-objects-grid-columns: 4; // 4 columns: a standard tile is (100cqw - 3 gaps) / 4 wide. - --c-objects-grid-row-height: calc((100cqw - 3 * var(--c-objects-grid-gap)) / 4 * 16 / 9); + --c-objects-grid-row-height: min(calc((100cqw - 3 * var(--c-objects-grid-gap)) / 4 * 16 / 9), #{$max-item-height}); } .c-block-objects-grid__title { diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.tsx b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.tsx index 07e3be99..88615df6 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.tsx +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.tsx @@ -174,7 +174,7 @@ export const BlockObjectsGrid: FunctionComponent = ({ className={clsx('c-block-objects-grid__tile', { 'c-block-objects-grid__tile--fixed': isFixed, })} - key={`objects-grid-placeholder__${index}`} + key={`objects-grid-placeholder__${index}__${tileBackgroundColor}__${isFixed}`} // The aria-live status below already announces that the objects are loading. aria-hidden="true" >