From 8f141357d35ccee6c2cb3d70eff42f5a8d63a2df Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Mon, 3 Mar 2025 10:29:36 +0100
Subject: [PATCH] refactor: add horizontal scroll to peel cards

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 packages/core-components/report.api.md        |  1 +
 .../HorizontalScrollGrid.tsx                  |  5 +++-
 .../src/alpha/DefaultEntityContentLayout.tsx  | 24 +++++++++++++++----
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/core-components/report.api.md b/packages/core-components/report.api.md
index c706eef2bb..77262e5360 100644
--- a/packages/core-components/report.api.md
+++ b/packages/core-components/report.api.md
@@ -20,6 +20,7 @@ import { default as CSS_2 } from 'csstype';
 import { CSSProperties } from 'react';
 import { ElementType } from 'react';
 import { ErrorInfo } from 'react';
+import { GridSpacing } from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { Icons } from '@material-table/core';
diff --git a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
index e89b7896dd..72a596415d 100644
--- a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
+++ b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
+import Grid, { GridSpacing } from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
 import { makeStyles } from '@material-ui/core/styles';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
@@ -54,6 +54,7 @@ type Props = {
   scrollStep?: number;
   scrollSpeed?: number; // lower is faster
   minScrollDistance?: number; // limits how small steps the scroll can take in px
+  spacing?: GridSpacing;
 };
 
 /** @public */
@@ -209,6 +210,7 @@ export function HorizontalScrollGrid(props: PropsWithChildren<Props>) {
     scrollStep = 100,
     scrollSpeed = 50,
     minScrollDistance = 5,
+    spacing,
     children,
     ...otherProps
   } = props;
@@ -234,6 +236,7 @@ export function HorizontalScrollGrid(props: PropsWithChildren<Props>) {
         wrap="nowrap"
         className={classes.container}
         ref={ref as any}
+        spacing={spacing}
       >
         {children}
       </Grid>
diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx
index 1c0572ca22..708f9bdb5f 100644
--- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx
+++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx
@@ -31,8 +31,12 @@ import {
   EntityProcessingErrorsPanel,
   hasCatalogProcessingErrors,
 } from '../components/EntityProcessingErrorsPanel';
+import { HorizontalScrollGrid } from '@backstage/core-components';
 
 const useStyles = makeStyles(theme => ({
+  peekCard: {
+    flex: '0 0 auto',
+  },
   [theme.breakpoints.up('sm')]: {
     infoArea: {
       order: 1,
@@ -103,11 +107,21 @@ export function DefaultEntityContentLayout(props: EntityContentLayoutProps) {
         <Grid xs={12} md={infoCards.length ? 8 : undefined} item>
           {peekCards.length > 0 ? (
             <Grid container spacing={3}>
-              {peekCards.map((card, index) => (
-                <Grid key={index} xs={12} md={4} item>
-                  {card.element}
-                </Grid>
-              ))}
+              <Grid item xs={12}>
+                <HorizontalScrollGrid spacing={3}>
+                  {peekCards.map((card, index) => (
+                    <Grid
+                      key={index}
+                      xs={12}
+                      md="auto"
+                      item
+                      className={classes.peekCard}
+                    >
+                      {card.element}
+                    </Grid>
+                  ))}
+                </HorizontalScrollGrid>
+              </Grid>
             </Grid>
           ) : null}
           {fullCards.length > 0 ? (