From 03ae4b29ed78ee9d0fea6c5561125a56c5544945 Mon Sep 17 00:00:00 2001 From: Nicola Molinari Date: Tue, 2 Jul 2024 14:04:35 +0200 Subject: [PATCH] fix: ensure page content layout columns have the correct sizes (#3560) --- .changeset/khaki-icons-smoke.md | 5 +++++ .../page-content-wide/page-content-wide.tsx | 16 +++++++++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 .changeset/khaki-icons-smoke.md diff --git a/.changeset/khaki-icons-smoke.md b/.changeset/khaki-icons-smoke.md new file mode 100644 index 0000000000..a3c98bac55 --- /dev/null +++ b/.changeset/khaki-icons-smoke.md @@ -0,0 +1,5 @@ +--- +'@commercetools-frontend/application-components': patch +--- + +Ensure that the page content layouts with two columns maintain the correct sizes. diff --git a/packages/application-components/src/components/page-content-containers/page-content-wide/page-content-wide.tsx b/packages/application-components/src/components/page-content-containers/page-content-wide/page-content-wide.tsx index ca3d4676a9..5aeb3940f9 100644 --- a/packages/application-components/src/components/page-content-containers/page-content-wide/page-content-wide.tsx +++ b/packages/application-components/src/components/page-content-containers/page-content-wide/page-content-wide.tsx @@ -19,13 +19,23 @@ const Content = styled.section< grid-template-areas: ${(props) => props.columns === '1' ? 'none' : '"left-column right-column"'}; grid-template-columns: ${(props) => { + // NOTE: using only `?fr` can cause the layout the "break" as `fr` + // is all about distribution of the available space. + // If the content of a column becomes "bigger", the system tries + // to compensate for the lack of space by reducing the width of the + // other column (it does not overflow). + // To fix that, we can use `minmax` to instruct the system that + // the column size has to be maintained. However, this will cause + // some overflow if the content is bigger. + // For us, it's important to ensure that the columns layout maintains + // the correct dimensions and sizes, thus using `minmax`. switch (props.columns) { case '1/1': - return '1fr 1fr'; + return 'repeat(2, minmax(0, 1fr))'; case '2/1': - return '2fr 1fr'; + return 'minmax(0, 2fr) minmax(0, 1fr)'; default: - return '1fr'; + return 'minmax(0, 1fr)'; } }}; gap: ${(props) =>