From 078d21a4c3ef18be40f288c4dc1bbb8208f5b22b Mon Sep 17 00:00:00 2001 From: Nathnael Dereje Date: Sun, 28 Jun 2026 00:23:20 +0200 Subject: [PATCH 1/2] fix: Replace flex with CSS grid in container fit-height to stop chart oscillation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PR #3018 (AWSUI-54814) introduced a flex column layout on .content-fit-height with a flex:1 inner wrapper to fix the table sticky scrollbar floating above the table content. Flex's sub-pixel space distribution makes the inner wrapper's content-box width oscillate by fractions of a pixel under certain conditions, which feeds back into LabelsMeasure's ResizeObserver and causes 'Maximum update depth exceeded' in legacy charts (BarChart, MixedLineBarChart, PieChart) inside fit-height containers — most visibly inside board-components BoardItem. CSS Grid with grid-template-rows: 1fr uses an integer-pixel track sizing algorithm, so the inner wrapper gets a stable integer width and the ResizeObserver feedback loop terminates after one cycle. The structural change (outer scrolling wrapper, inner padding wrapper) is preserved, so the original AWSUI-54814 sticky scrollbar fix continues to work. Bisect notes (board-components content-permutations dev page): components 3.0.836 -> CLEAN components 3.0.837 -> BROKEN (PR #3018 lands) components HEAD with Option D (CSS Grid) -> CLEAN components HEAD with min-block-size: 100% (no flex) -> STILL OSCILLATES components HEAD with flex: 1 1 auto -> STILL OSCILLATES Rel: AWSUI-62091 Rel: AWSUI-54814 (regression guard) --- src/container/styles.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/container/styles.scss b/src/container/styles.scss index c37e6a61aa..1041a712dc 100644 --- a/src/container/styles.scss +++ b/src/container/styles.scss @@ -256,12 +256,12 @@ flex: 1; &-fit-height { overflow: auto; - display: flex; - flex-direction: column; + display: grid; + grid-template-rows: 1fr; } } .content-inner { - flex: 1; + min-block-size: 0; &.with-paddings { padding-block: awsui.$space-scaled-l; From 1d39c42b72af5b2b6c73811c7caa3ba1f09b43fa Mon Sep 17 00:00:00 2001 From: Nathnael Dereje Date: Wed, 1 Jul 2026 02:03:57 +0200 Subject: [PATCH 2/2] fix: Restore definite block-size and constrained inline size for fit-height inner MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Follow-up to the CSS Grid switch. Two related sizing issues surfaced in the board-components content-permutations screenshot tests once the inner wrapper became a grid item: 1. Vertical: legacy charts inside fitHeight use a nested and measure its rendered height via useHeightMeasure. With min-block-size: 0 alone on the grid item, the inner wrapper's block-size is indefinite for percentage resolution, so the SVG falls back to its intrinsic viewport height. That produces a plot much larger than the widget and pushes the bars/legend off-screen. Fix: add block-size: 100% so descendants have a definite parent height to resolve against — matches the resolved-size behavior of the original flex: 1 layout without reintroducing flex's sub-pixel width distribution. 2. Horizontal: without an explicit column track, the grid falls back to an implicit auto column that grows to the widest child's max-content, letting wide inner content overflow the container instead of being scrolled by overflow: auto. Fix: grid-template-columns: minmax(0, 1fr) on the outer + min-inline- size: 0 on the inner, which replicates flex's align-items: stretch: the inner is exactly one parent width, wide content overflows the inner, and .content-fit-height's overflow: auto handles scrolling. Verified against board-components content-permutations page (Firefox screenshot test AWS-UI-IntegrationTests board-components-Firefox-local- light-console-comfortable). Rel: AWSUI-62091 --- src/container/styles.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/container/styles.scss b/src/container/styles.scss index 1041a712dc..252c614612 100644 --- a/src/container/styles.scss +++ b/src/container/styles.scss @@ -258,10 +258,13 @@ overflow: auto; display: grid; grid-template-rows: 1fr; + grid-template-columns: minmax(0, 1fr); } } .content-inner { + block-size: 100%; min-block-size: 0; + min-inline-size: 0; &.with-paddings { padding-block: awsui.$space-scaled-l;