From a767aaa472c139e5c9d068d87392ac2a932bcf7b Mon Sep 17 00:00:00 2001
From: JounQin <admin@1stg.me>
Date: Fri, 1 Mar 2024 15:04:43 +0800
Subject: [PATCH 1/2] fix: `OwnershipCard` could be unscrollable when using
 together with `react-grid-layout`

Signed-off-by: JounQin <admin@1stg.me>
---
 .changeset/unlucky-apricots-call.md           |  5 +++++
 .../Cards/OwnershipCard/ComponentsGrid.tsx    |  4 +++-
 .../OwnershipCard/OwnershipCard.stories.tsx   |  7 ++++++-
 .../Cards/OwnershipCard/OwnershipCard.tsx     | 20 ++++++++++++++++++-
 4 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/unlucky-apricots-call.md

diff --git a/.changeset/unlucky-apricots-call.md b/.changeset/unlucky-apricots-call.md
new file mode 100644
index 0000000000..cad21931d7
--- /dev/null
+++ b/.changeset/unlucky-apricots-call.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+fix: `OwnershipCard` could be unscrollable when using together with `react-grid-layout`
diff --git a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx
index cffed95c7a..1eb2a95ff6 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx
@@ -107,11 +107,13 @@ const EntityCountTile = ({
 };
 
 export const ComponentsGrid = ({
+  className,
   entity,
   relationsType,
   entityFilterKind,
   entityLimit = 6,
 }: {
+  className?: string;
   entity: Entity;
   relationsType: EntityRelationAggregation;
   entityFilterKind?: string[];
@@ -132,7 +134,7 @@ export const ComponentsGrid = ({
   }
 
   return (
-    <Grid container>
+    <Grid container className={className}>
       {componentsWithCounters?.map(c => (
         <Grid item xs={6} md={6} lg={4} key={c.type ?? c.kind}>
           <EntityCountTile
diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
index 1f50dc33d8..d0b9ea1197 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
@@ -98,7 +98,12 @@ export const Default = () =>
     <ApiProvider apis={apis}>
       <EntityProvider entity={defaultEntity}>
         <Grid container spacing={4}>
-          <Grid item xs={12} md={6}>
+          <Grid
+            item
+            xs={12}
+            md={6}
+            style={{ maxHeight: 320, overflow: 'hidden' }}
+          >
             <OwnershipCard />
           </Grid>
         </Grid>
diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
index 791ce5ca64..278e2f4b70 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
@@ -30,6 +30,14 @@ import { ComponentsGrid } from './ComponentsGrid';
 import { EntityRelationAggregation } from './types';
 
 const useStyles = makeStyles(theme => ({
+  card: {
+    maxHeight: '100%',
+  },
+  cardContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+  },
   list: {
     [theme.breakpoints.down('xs')]: {
       padding: `0 0 12px`,
@@ -50,6 +58,10 @@ const useStyles = makeStyles(theme => ({
       transform: 'unset',
     },
   },
+  grid: {
+    overflowY: 'auto',
+    marginTop: 0,
+  },
 }));
 
 /** @public */
@@ -84,7 +96,12 @@ export const OwnershipCard = (props: {
   }, [setRelationsType, defaultRelationsType, relationsType]);
 
   return (
-    <InfoCard title="Ownership" variant={variant}>
+    <InfoCard
+      title="Ownership"
+      variant={variant}
+      className={classes.card}
+      cardClassName={classes.cardContent}
+    >
       {!relationsToggle && (
         <List dense>
           <ListItem className={classes.list}>
@@ -118,6 +135,7 @@ export const OwnershipCard = (props: {
         </List>
       )}
       <ComponentsGrid
+        className={classes.grid}
         entity={entity}
         entityLimit={entityLimit}
         relationsType={getRelationsType}

From bec6da8bf2d4233cecbd890e168ef0b57e8d1960 Mon Sep 17 00:00:00 2001
From: JounQin <admin@1stg.me>
Date: Sat, 2 Mar 2024 08:47:02 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20unlucky-apricots-call.?=
 =?UTF-8?q?md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Vincenzo Scamporlino <vincenzos@spotify.com>
Signed-off-by: JounQin <admin@1stg.me>
---
 .changeset/unlucky-apricots-call.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/unlucky-apricots-call.md b/.changeset/unlucky-apricots-call.md
index cad21931d7..cad43ecf39 100644
--- a/.changeset/unlucky-apricots-call.md
+++ b/.changeset/unlucky-apricots-call.md
@@ -2,4 +2,4 @@
 '@backstage/plugin-org': patch
 ---
 
-fix: `OwnershipCard` could be unscrollable when using together with `react-grid-layout`
+Fixed an issue where the `OwnershipCard` component failed to scroll properly when used alongside `react-grid-layout`.