refactor: add horizontal scroll to peel cards

Signed-off-by: Camila Belo <camilaibs@gmail.com>

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';

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>

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 ? (