From a0a03da90dbdb0691add1493bb3748c3446b3b51 Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Thu, 24 Jul 2025 09:50:32 +0200 Subject: [PATCH 1/9] feat: reworking the layout again to support scrollable info cards Signed-off-by: benjdlambert --- .../src/alpha/DefaultEntityContentLayout.tsx | 78 +++++++++++-------- 1 file changed, 45 insertions(+), 33 deletions(-) diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index 21276f424a..ecae71f2e5 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -41,7 +41,7 @@ const useStyles = makeStyles< flexFlow: 'column nowrap', gap: theme.spacing(3), }, - contentArea: { + mainContent: { display: 'flex', flexFlow: 'column', gap: theme.spacing(3), @@ -51,9 +51,14 @@ const useStyles = makeStyles< infoArea: { display: 'flex', flexFlow: 'column nowrap', - alignItems: 'stretch', + alignItems: 'flex-start', gap: theme.spacing(3), minWidth: 0, + '& > *': { + flexShrink: 0, + flexGrow: 0, + flexBasis: 'auto', + }, }, summaryArea: { minWidth: 0, @@ -65,29 +70,32 @@ const useStyles = makeStyles< marginLeft: theme.spacing(3), }, }, + contentArea: { + display: 'flex', + flexFlow: 'column', + gap: theme.spacing(3), + alignItems: 'stretch', + minWidth: 0, + }, [theme.breakpoints.up('md')]: { root: { - display: 'grid', - gap: 0, - gridTemplateAreas: ({ summaryCards }) => ` - "${summaryCards ? 'summary' : 'content'} info" - "content info" - `, - gridTemplateColumns: ({ infoCards }) => (infoCards ? '2fr 1fr' : '1fr'), - alignItems: 'start', + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-start', + gap: theme.spacing(3), + }, + mainContent: { + flex: '2 1 0', + minWidth: 0, }, infoArea: { - gridArea: 'info', + flex: '0 0 auto', + width: '33.333%', position: 'sticky', top: theme.spacing(3), - marginLeft: theme.spacing(3), - }, - contentArea: { - gridArea: 'content', - }, - summaryArea: { - gridArea: 'summary', - marginBottom: theme.spacing(3), + maxHeight: `calc(100vh - ${theme.spacing(6)}px)`, + overflowY: 'auto', + alignSelf: 'flex-start', }, }, })); @@ -139,23 +147,27 @@ export function DefaultEntityContentLayout(props: EntityContentLayoutProps) { <> {entityWarningContent}
+
+ {summaryCards.length > 0 ? ( +
+ + {summaryCards.map(card => ( +
{card.element}
+ ))} + +
+ ) : null} + {contentCards.length > 0 ? ( +
+ {contentCards.map(card => card.element)} +
+ ) : null} +
{infoCards.length > 0 ? (
{infoCards.map(card => card.element)} -
- ) : null} - {summaryCards.length > 0 ? ( -
- - {summaryCards.map(card => ( -
{card.element}
- ))} - -
- ) : null} - {contentCards.length > 0 ? ( -
- {contentCards.map(card => card.element)} + {infoCards.map(card => card.element)} + {infoCards.map(card => card.element)}
) : null}
From ae90534a449cc8f94b887db957d1b79f30147e11 Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Thu, 24 Jul 2025 09:53:07 +0200 Subject: [PATCH 2/9] chore: make this work with grid areas Signed-off-by: benjdlambert --- .../src/alpha/DefaultEntityContentLayout.tsx | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index ecae71f2e5..4db4c05b6d 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -79,23 +79,32 @@ const useStyles = makeStyles< }, [theme.breakpoints.up('md')]: { root: { - display: 'flex', - flexDirection: 'row', - alignItems: 'flex-start', + display: 'grid', gap: theme.spacing(3), + gridTemplateAreas: ({ summaryCards }) => ` + "${summaryCards ? 'summary' : 'content'} info" + "content info" + `, + gridTemplateColumns: ({ infoCards }) => (infoCards ? '2fr 1fr' : '1fr'), + alignItems: 'start', }, mainContent: { - flex: '2 1 0', - minWidth: 0, + display: 'contents', + }, + contentArea: { + gridArea: 'content', + }, + summaryArea: { + gridArea: 'summary', + marginBottom: theme.spacing(3), }, infoArea: { - flex: '0 0 auto', - width: '33.333%', + gridArea: 'info', position: 'sticky', top: theme.spacing(3), maxHeight: `calc(100vh - ${theme.spacing(6)}px)`, overflowY: 'auto', - alignSelf: 'flex-start', + alignSelf: 'start', }, }, })); From 07242020a0b5deded60ea25ae8ae2f71a5081d4d Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Thu, 24 Jul 2025 09:54:02 +0200 Subject: [PATCH 3/9] chore: remove testing Signed-off-by: benjdlambert --- plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index 4db4c05b6d..4f675241c9 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -175,8 +175,6 @@ export function DefaultEntityContentLayout(props: EntityContentLayoutProps) { {infoCards.length > 0 ? (
{infoCards.map(card => card.element)} - {infoCards.map(card => card.element)} - {infoCards.map(card => card.element)}
) : null} From c50d1f7c4a71d7338d20d6bc883e335b904d8ad0 Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Thu, 24 Jul 2025 09:58:04 +0200 Subject: [PATCH 4/9] chore: hide sidebar Signed-off-by: benjdlambert --- plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index 4f675241c9..0b7b9be4f6 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -105,6 +105,13 @@ const useStyles = makeStyles< maxHeight: `calc(100vh - ${theme.spacing(6)}px)`, overflowY: 'auto', alignSelf: 'start', + // Hide the scrollbar for the inner info cards + // kind of an accessibility nightmare, but we see. + scrollbarWidth: 'none', + msOverflowStyle: 'none', + '&::-webkit-scrollbar': { + display: 'none', + }, }, }, })); From 0e62c238f901275fbeb4360fe3f47c9d385abf8b Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Thu, 24 Jul 2025 10:25:48 +0200 Subject: [PATCH 5/9] chore: moving things around Signed-off-by: benjdlambert --- .../catalog/src/alpha/DefaultEntityContentLayout.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index 0b7b9be4f6..0d3d4ac6c9 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -102,6 +102,8 @@ const useStyles = makeStyles< gridArea: 'info', position: 'sticky', top: theme.spacing(3), + // this is a little unfortunate, it's basically vh - header, in order for the page to scroll + // naturally throught the main cards. maxHeight: `calc(100vh - ${theme.spacing(6)}px)`, overflowY: 'auto', alignSelf: 'start', @@ -163,6 +165,11 @@ export function DefaultEntityContentLayout(props: EntityContentLayoutProps) { <> {entityWarningContent}
+ {infoCards.length > 0 ? ( +
+ {infoCards.map(card => card.element)} +
+ ) : null}
{summaryCards.length > 0 ? (
@@ -179,11 +186,6 @@ export function DefaultEntityContentLayout(props: EntityContentLayoutProps) {
) : null}
- {infoCards.length > 0 ? ( -
- {infoCards.map(card => card.element)} -
- ) : null}
); From f832f299db6261f242aa4115030c16f44d86832a Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Thu, 24 Jul 2025 10:27:23 +0200 Subject: [PATCH 6/9] chore: dont need basis Signed-off-by: benjdlambert --- plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index 0d3d4ac6c9..a18c3fbab3 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -57,7 +57,6 @@ const useStyles = makeStyles< '& > *': { flexShrink: 0, flexGrow: 0, - flexBasis: 'auto', }, }, summaryArea: { From 2e7afba3a0fe52574177a2971fb7efcee40bb7a0 Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Thu, 24 Jul 2025 13:30:33 +0200 Subject: [PATCH 7/9] chore: adjust the comment and fix Signed-off-by: benjdlambert --- plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index a18c3fbab3..e5f7007356 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -101,9 +101,10 @@ const useStyles = makeStyles< gridArea: 'info', position: 'sticky', top: theme.spacing(3), - // this is a little unfortunate, it's basically vh - header, in order for the page to scroll - // naturally throught the main cards. - maxHeight: `calc(100vh - ${theme.spacing(6)}px)`, + // this is a little unfortunate, but it's required to make the info cards scrollable + // in a fixed container of the full height when it's stuck. + // 100% doesn't work as that's the height of the entire layout, which is what powers the card scrolling. + maxHeight: '100vh', overflowY: 'auto', alignSelf: 'start', // Hide the scrollbar for the inner info cards From 185744a89a66c93dd692c743219ae49e8ffcffa4 Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Thu, 24 Jul 2025 13:38:47 +0200 Subject: [PATCH 8/9] chore: need to stretch the cards to make them fit horizontally Signed-off-by: benjdlambert --- plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index e5f7007356..3188b98437 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -107,6 +107,7 @@ const useStyles = makeStyles< maxHeight: '100vh', overflowY: 'auto', alignSelf: 'start', + alignItems: 'stretch', // Hide the scrollbar for the inner info cards // kind of an accessibility nightmare, but we see. scrollbarWidth: 'none', From c0ea01bced5b946f1b7023cf03aad0dd63f13fa5 Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Thu, 24 Jul 2025 13:41:34 +0200 Subject: [PATCH 9/9] chore: add changeset Signed-off-by: benjdlambert --- .changeset/afraid-poets-thank.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/afraid-poets-thank.md diff --git a/.changeset/afraid-poets-thank.md b/.changeset/afraid-poets-thank.md new file mode 100644 index 0000000000..b234e2e2c1 --- /dev/null +++ b/.changeset/afraid-poets-thank.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Fix card scrolling behaviour