From b8ebd3d2e4e501831b306e9d392d225b4c5336d0 Mon Sep 17 00:00:00 2001
From: Heikki Hellgren <heikki.hellgren@op.fi>
Date: Wed, 28 Jun 2023 08:27:39 +0300
Subject: [PATCH] fix: missing breakpoints in columns of custom homepage grid

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>
---
 .changeset/strange-baboons-look.md             |  5 +++++
 plugins/home/api-report.md                     |  2 +-
 .../CustomHomepage/CustomHomepageGrid.tsx      | 18 ++++++++++--------
 3 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/strange-baboons-look.md

diff --git a/.changeset/strange-baboons-look.md b/.changeset/strange-baboons-look.md
new file mode 100644
index 0000000000..4b2e14b301
--- /dev/null
+++ b/.changeset/strange-baboons-look.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Fix missing column breakpoints in `CustomHompageGrid`
diff --git a/plugins/home/api-report.md b/plugins/home/api-report.md
index e4ff522062..1001f27b51 100644
--- a/plugins/home/api-report.md
+++ b/plugins/home/api-report.md
@@ -20,7 +20,7 @@ import { RendererProps as RendererProps_2 } from '@backstage/plugin-home-react';
 import { RouteRef } from '@backstage/core-plugin-api';
 
 // @public
-export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 // @public @deprecated (undocumented)
 export type CardConfig = CardConfig_2;
diff --git a/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx b/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx
index d42356a8d2..2d4636a4b4 100644
--- a/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx
+++ b/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx
@@ -17,11 +17,11 @@
 import React, { ReactNode, useCallback, useMemo } from 'react';
 import { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';
 import {
+  ElementCollection,
+  getComponentData,
   storageApiRef,
   useApi,
-  getComponentData,
   useElementFilter,
-  ElementCollection,
 } from '@backstage/core-plugin-api';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
@@ -29,8 +29,8 @@ import {
   createStyles,
   Dialog,
   makeStyles,
-  useTheme,
   Theme,
+  useTheme,
 } from '@material-ui/core';
 import { compact } from 'lodash';
 import useObservable from 'react-use/lib/useObservable';
@@ -42,10 +42,10 @@ import { CustomHomepageButtons } from './CustomHomepageButtons';
 import {
   CustomHomepageGridStateV1,
   CustomHomepageGridStateV1Schema,
-  LayoutConfiguration,
-  Widget,
   GridWidget,
+  LayoutConfiguration,
   LayoutConfigurationSchema,
+  Widget,
   WidgetSchema,
 } from './types';
 import { CardConfig } from '@backstage/plugin-home-react';
@@ -194,7 +194,7 @@ const availableWidgetsFilter = (elements: ElementCollection) => {
  *
  * @public
  */
-export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 /**
  * Props customizing the <CustomHomepageGrid/> component.
@@ -410,11 +410,13 @@ export const CustomHomepageGrid = (props: CustomHomepageGridProps) => {
           props.breakpoints ? props.breakpoints : theme.breakpoints.values
         }
         cols={
-          props.cols ? props.cols : { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }
+          props.cols
+            ? props.cols
+            : { xl: 12, lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }
         }
         rowHeight={props.rowHeight ?? 60}
         onLayoutChange={handleLayoutChange}
-        layouts={{ lg: widgets.map(w => w.layout) }}
+        layouts={{ xl: widgets.map(w => w.layout) }}
       >
         {widgets.map((w: GridWidget) => {
           const l = w.layout;