@red-hat-developer-hub/backstage-plugin-dynamic-home-page 1.10.6 → 1.12.0

package/dist/alpha.d.ts

@@ -0,0 +1,77 @@
+import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
+
+/**
+ * Translation ref for the Dynamic Home Page plugin.
+ * Defines all translation keys used in the plugin.
+ *
+ * @public
+ */
+declare const homepageTranslationRef: _backstage_frontend_plugin_api.TranslationRef<"plugin.homepage", {
+    readonly "header.local": string;
+    readonly "header.welcome": string;
+    readonly "header.welcomePersonalized": string;
+    readonly "search.placeholder": string;
+    readonly "homePage.empty": string;
+    readonly "quickAccess.title": string;
+    readonly "quickAccess.error": string;
+    readonly "quickAccess.fetchError": string;
+    readonly "featuredDocs.learnMore": string;
+    readonly "templates.title": string;
+    readonly "templates.error": string;
+    readonly "templates.empty": string;
+    readonly "templates.fetchError": string;
+    readonly "templates.emptyDescription": string;
+    readonly "templates.register": string;
+    readonly "templates.viewAll": string;
+    readonly "onboarding.guest": string;
+    readonly "onboarding.greeting.goodMorning": string;
+    readonly "onboarding.greeting.goodAfternoon": string;
+    readonly "onboarding.greeting.goodEvening": string;
+    readonly "onboarding.getStarted.title": string;
+    readonly "onboarding.getStarted.description": string;
+    readonly "onboarding.getStarted.buttonText": string;
+    readonly "onboarding.getStarted.ariaLabel": string;
+    readonly "onboarding.explore.title": string;
+    readonly "onboarding.explore.description": string;
+    readonly "onboarding.explore.buttonText": string;
+    readonly "onboarding.explore.ariaLabel": string;
+    readonly "onboarding.learn.title": string;
+    readonly "onboarding.learn.description": string;
+    readonly "onboarding.learn.buttonText": string;
+    readonly "onboarding.learn.ariaLabel": string;
+    readonly "entities.title": string;
+    readonly "entities.error": string;
+    readonly "entities.description": string;
+    readonly "entities.close": string;
+    readonly "entities.empty": string;
+    readonly "entities.fetchError": string;
+    readonly "entities.emptyDescription": string;
+    readonly "entities.register": string;
+    readonly "entities.browseTheCatalog": string;
+}>;
+
+/**
+ * Translation resource for the Dynamic Home Page plugin (en, de, es, fr, it, ja).
+ *
+ * @public
+ */
+declare const homepageTranslations: _backstage_frontend_plugin_api.TranslationResource<"plugin.homepage">;
+
+/**
+ * Frontend module for the Dynamic Home Page plugin (New Frontend System).
+ *
+ * Extends the `home` plugin with a custom layout and RHDH widgets: Onboarding,
+ * Entity Catalog, Templates, Quick Access, Search, Recently Visited, Top Visited, etc.
+ * Add to your app's `createApp({ features: [..., homePageDevModule] })`.
+ *
+ * @alpha
+ */
+declare const homePageModule: _backstage_frontend_plugin_api.FrontendModule;
+/**
+ * Translation module for the Dynamic Home Page plugin.
+ *
+ * @alpha
+ */
+declare const homepageTranslationsModule: _backstage_frontend_plugin_api.FrontendModule;
+
+export { homePageModule, homepageTranslationRef, homepageTranslations, homepageTranslationsModule };

package/dist/alpha.esm.js

@@ -0,0 +1,39 @@
+import { TranslationBlueprint } from '@backstage/plugin-app-react';
+import { createFrontendModule } from '@backstage/frontend-plugin-api';
+import { onboardingSectionWidget, entitySectionWidget, templateSectionWidget, quickAccessCardWidget, featuredDocsCardWidget, searchBarWidget, TopVisitedWidget, RecentlyVisitedWidget, catalogStarredWidget, disableToolkit } from './alpha/extensions/homePageCards.esm.js';
+import { homepageTranslations } from './translations/index.esm.js';
+import { homePageLayoutExtension } from './alpha/extensions/homePageLayoutExtension.esm.js';
+import { quickAccessApi } from './alpha/extensions/apis.esm.js';
+export { homepageTranslationRef } from './translations/ref.esm.js';
+
+const homePageModule = createFrontendModule({
+  pluginId: "home",
+  extensions: [
+    homePageLayoutExtension,
+    onboardingSectionWidget,
+    entitySectionWidget,
+    templateSectionWidget,
+    quickAccessApi,
+    quickAccessCardWidget,
+    featuredDocsCardWidget,
+    searchBarWidget,
+    TopVisitedWidget,
+    RecentlyVisitedWidget,
+    catalogStarredWidget,
+    disableToolkit
+  ]
+});
+const homepageTranslationsModule = createFrontendModule({
+  pluginId: "app",
+  extensions: [
+    TranslationBlueprint.make({
+      name: "homepage-translations",
+      params: {
+        resource: homepageTranslations
+      }
+    })
+  ]
+});
+
+export { homePageModule, homepageTranslations, homepageTranslationsModule };
+//# sourceMappingURL=alpha.esm.js.map

package/dist/alpha.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha/index.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { TranslationBlueprint } from '@backstage/plugin-app-react';\nimport { createFrontendModule } from '@backstage/frontend-plugin-api';\nimport {\n  catalogStarredWidget,\n  disableToolkit,\n  entitySectionWidget,\n  featuredDocsCardWidget,\n  onboardingSectionWidget,\n  quickAccessCardWidget,\n  RecentlyVisitedWidget,\n  searchBarWidget,\n  templateSectionWidget,\n  TopVisitedWidget,\n} from './extensions/homePageCards';\nimport { homepageTranslations } from '../translations';\n\nimport { homePageLayoutExtension } from './extensions/homePageLayoutExtension';\nimport { quickAccessApi } from './extensions/apis';\n\n/**\n * Frontend module for the Dynamic Home Page plugin (New Frontend System).\n *\n * Extends the `home` plugin with a custom layout and RHDH widgets: Onboarding,\n * Entity Catalog, Templates, Quick Access, Search, Recently Visited, Top Visited, etc.\n * Add to your app's `createApp({ features: [..., homePageDevModule] })`.\n *\n * @alpha\n */\nexport const homePageModule = createFrontendModule({\n  pluginId: 'home',\n  extensions: [\n    homePageLayoutExtension,\n    onboardingSectionWidget,\n    entitySectionWidget,\n    templateSectionWidget,\n    quickAccessApi,\n    quickAccessCardWidget,\n    featuredDocsCardWidget,\n    searchBarWidget,\n    TopVisitedWidget,\n    RecentlyVisitedWidget,\n    catalogStarredWidget,\n    disableToolkit,\n  ],\n});\n\n/**\n * Translation module for the Dynamic Home Page plugin.\n *\n * @alpha\n */\nexport const homepageTranslationsModule = createFrontendModule({\n  pluginId: 'app',\n  extensions: [\n    TranslationBlueprint.make({\n      name: 'homepage-translations',\n      params: {\n        resource: homepageTranslations,\n      },\n    }),\n  ],\n});\n\n/**\n *\n * @alpha\n */\nexport { homepageTranslationRef, homepageTranslations } from '../translations';\n"],"names":[],"mappings":";;;;;;;;AA4CO,MAAM,iBAAiB,oBAAqB,CAAA;AAAA,EACjD,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA;AAAA,IACV,uBAAA;AAAA,IACA,uBAAA;AAAA,IACA,mBAAA;AAAA,IACA,qBAAA;AAAA,IACA,cAAA;AAAA,IACA,qBAAA;AAAA,IACA,sBAAA;AAAA,IACA,eAAA;AAAA,IACA,gBAAA;AAAA,IACA,qBAAA;AAAA,IACA,oBAAA;AAAA,IACA;AAAA;AAEJ,CAAC;AAOM,MAAM,6BAA6B,oBAAqB,CAAA;AAAA,EAC7D,QAAU,EAAA,KAAA;AAAA,EACV,UAAY,EAAA;AAAA,IACV,qBAAqB,IAAK,CAAA;AAAA,MACxB,IAAM,EAAA,uBAAA;AAAA,MACN,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA;AAAA;AACZ,KACD;AAAA;AAEL,CAAC;;;;"}

package/dist/components/CustomizableGrid.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useRef, useMemo } from 'react';
 import { CustomHomepageGrid } from '@backstage/plugin-home';
 import { createCardExtension } from '@backstage/plugin-home-react';
 import GlobalStyles from '@mui/material/GlobalStyles';
@@ -7,11 +7,14 @@ import { useTheme } from '@mui/material/styles';
 import 'react-grid-layout/css/styles.css';
 import { dynamicHomePagePlugin } from '../plugin.esm.js';
 import { useTranslation } from '../hooks/useTranslation.esm.js';
+import { useContainerQuery } from '../hooks/useContainerQuery.esm.js';
 import { getCardTitle, getCardDescription, isCardADefaultConfiguration } from '../utils/customizable-cards.esm.js';
 
 const CustomizableGrid = ({ mountPoints }) => {
   const theme = useTheme();
   const { t } = useTranslation();
+  const gridContainerRef = useRef(null);
+  useContainerQuery(gridContainerRef, { notifyWindowResize: true });
   const { children, config } = useMemo(() => {
     const childDictionary = {};
     const defaultConfig = [];
@@ -77,13 +80,20 @@ const CustomizableGrid = ({ mountPoints }) => {
       }
     ),
     /* @__PURE__ */ jsx(
-      CustomHomepageGrid,
+      "div",
       {
-        config,
-        preventCollision: false,
-        compactType: "vertical",
-        style: { margin: "-10px" },
-        children
+        ref: gridContainerRef,
+        style: { width: "100%", minWidth: 0, boxSizing: "border-box" },
+        children: /* @__PURE__ */ jsx(
+          CustomHomepageGrid,
+          {
+            config,
+            preventCollision: false,
+            compactType: "vertical",
+            style: { margin: "-10px" },
+            children
+          }
+        )
       }
     )
   ] });

package/dist/components/CustomizableGrid.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomizableGrid.esm.js","sources":["../../src/components/CustomizableGrid.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// This complete read-only home page grid picks up the idea and styles from\n// https://github.com/backstage/backstage/blob/master/plugins/home\n// Esp. from the CustomHomepageGrid component:\n// https://github.com/backstage/backstage/blob/master/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx\n// but without the drag and drop functionality.\n\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport {\n  CustomHomepageGrid,\n  LayoutConfiguration,\n} from '@backstage/plugin-home';\nimport {\n  ComponentParts,\n  createCardExtension,\n} from '@backstage/plugin-home-react';\n\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport { useTheme } from '@mui/material/styles';\n\n// Removes the doubled scrollbar\nimport 'react-grid-layout/css/styles.css';\n\nimport { HomePageCardMountPoint } from '../types';\nimport { dynamicHomePagePlugin } from '../plugin';\nimport { useTranslation } from '../hooks/useTranslation';\nimport {\n  isCardADefaultConfiguration,\n  getCardTitle,\n  getCardDescription,\n} from '../utils/customizable-cards';\n\n/**\n * @public\n */\nexport interface CustomizableGridProps {\n  mountPoints: HomePageCardMountPoint[];\n}\n\n/**\n * @public\n */\nexport const CustomizableGrid = ({ mountPoints }: CustomizableGridProps) => {\n  const theme = useTheme();\n  const { t } = useTranslation();\n\n  const { children, config } = useMemo(() => {\n    // Children contains the additional / available cards a user can add.\n    // Maps the card name to the actual card component.\n    // Contains also the title to allow sorting before rendering.\n    const childDictionary: Record<\n      string,\n      { child: ReactElement; title: string | undefined }\n    > = {};\n\n    // Config contains the default layout of the homepage\n    const defaultConfig: LayoutConfiguration[] = [];\n\n    mountPoints.forEach(mountPoint => {\n      if (!mountPoint.config?.id) {\n        return;\n      }\n      const id = mountPoint.config.id;\n      const title = getCardTitle(t, mountPoint);\n      const description = getCardDescription(t, mountPoint);\n\n      const automaticallyWrapInInfoCard = false;\n\n      const componentParts: ComponentParts = {\n        Content: props => (\n          <mountPoint.Component {...mountPoint.config!.props} {...props} />\n        ),\n        // Untested and unsupported for now!\n        Actions: mountPoint.Actions as () => JSX.Element,\n        // Untested and unsupported for now!\n        Settings: mountPoint.Settings as () => JSX.Element,\n        // This is a workaround to NOT automatically wrap in an InfoCard\n        ContextProvider: automaticallyWrapInInfoCard\n          ? undefined\n          : props => (\n              <mountPoint.Component {...mountPoint.config!.props} {...props} />\n            ),\n      };\n\n      const cardExtension = createCardExtension({\n        name: id,\n        title,\n        description,\n        layout: mountPoint.config.cardLayout,\n        settings: mountPoint.config.settings,\n        components: () => Promise.resolve(componentParts),\n      });\n\n      const Card = dynamicHomePagePlugin.provide(cardExtension);\n\n      childDictionary[id] = {\n        child: <Card />,\n        title,\n      };\n\n      if (isCardADefaultConfiguration(mountPoint)) {\n        const layout = mountPoint.config?.layouts?.xl || {};\n\n        defaultConfig.push({\n          component: id,\n          x: layout.x ?? 0,\n          y: layout.y ?? 0,\n          width: layout.w ?? 12,\n          height: layout.h ?? 4,\n          movable: true,\n          deletable: true,\n          resizable: true,\n        });\n      }\n    });\n\n    return {\n      children: Object.values(childDictionary)\n        .sort((a, b) =>\n          a.title && b.title ? a.title.localeCompare(b.title) : 0,\n        )\n        .map(e => e.child),\n      config: defaultConfig,\n    };\n  }, [mountPoints, t]);\n\n  return (\n    <>\n      <GlobalStyles\n        styles={{\n          '[class*=\"makeStyles-settingsOverlay\"]': {\n            backgroundColor:\n              theme.palette.mode === 'dark'\n                ? 'rgba(20, 20, 20, 0.95) !important'\n                : 'rgba(40, 40, 40, 0.93) !important',\n          },\n        }}\n      />\n      <CustomHomepageGrid\n        config={config}\n        preventCollision={false}\n        compactType=\"vertical\"\n        style={{ margin: '-10px' }}\n      >\n        {children}\n      </CustomHomepageGrid>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA2DO,MAAM,gBAAmB,GAAA,CAAC,EAAE,WAAA,EAAyC,KAAA;AAC1E,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,MAAM,EAAE,QAAA,EAAU,MAAO,EAAA,GAAI,QAAQ,MAAM;AAIzC,IAAA,MAAM,kBAGF,EAAC;AAGL,IAAA,MAAM,gBAAuC,EAAC;AAE9C,IAAA,WAAA,CAAY,QAAQ,CAAc,UAAA,KAAA;AAChC,MAAI,IAAA,CAAC,UAAW,CAAA,MAAA,EAAQ,EAAI,EAAA;AAC1B,QAAA;AAAA;AAEF,MAAM,MAAA,EAAA,GAAK,WAAW,MAAO,CAAA,EAAA;AAC7B,MAAM,MAAA,KAAA,GAAQ,YAAa,CAAA,CAAA,EAAG,UAAU,CAAA;AACxC,MAAM,MAAA,WAAA,GAAc,kBAAmB,CAAA,CAAA,EAAG,UAAU,CAAA;AAIpD,MAAA,MAAM,cAAiC,GAAA;AAAA,QACrC,OAAA,EAAS,CACP,KAAA,qBAAA,GAAA,CAAC,UAAW,CAAA,SAAA,EAAX,EAAsB,GAAG,UAAW,CAAA,MAAA,CAAQ,KAAQ,EAAA,GAAG,KAAO,EAAA,CAAA;AAAA;AAAA,QAGjE,SAAS,UAAW,CAAA,OAAA;AAAA;AAAA,QAEpB,UAAU,UAAW,CAAA,QAAA;AAAA;AAAA,QAErB,eAAiB,EAEb,CAAA,KAAA,qBACG,GAAA,CAAA,UAAA,CAAW,SAAX,EAAA,EAAsB,GAAG,UAAA,CAAW,MAAQ,CAAA,KAAA,EAAQ,GAAG,KAAO,EAAA;AAAA,OAEvE;AAEA,MAAA,MAAM,gBAAgB,mBAAoB,CAAA;AAAA,QACxC,IAAM,EAAA,EAAA;AAAA,QACN,KAAA;AAAA,QACA,WAAA;AAAA,QACA,MAAA,EAAQ,WAAW,MAAO,CAAA,UAAA;AAAA,QAC1B,QAAA,EAAU,WAAW,MAAO,CAAA,QAAA;AAAA,QAC5B,UAAY,EAAA,MAAM,OAAQ,CAAA,OAAA,CAAQ,cAAc;AAAA,OACjD,CAAA;AAED,MAAM,MAAA,IAAA,GAAO,qBAAsB,CAAA,OAAA,CAAQ,aAAa,CAAA;AAExD,MAAA,eAAA,CAAgB,EAAE,CAAI,GAAA;AAAA,QACpB,KAAA,sBAAQ,IAAK,EAAA,EAAA,CAAA;AAAA,QACb;AAAA,OACF;AAEA,MAAI,IAAA,2BAAA,CAA4B,UAAU,CAAG,EAAA;AAC3C,QAAA,MAAM,MAAS,GAAA,UAAA,CAAW,MAAQ,EAAA,OAAA,EAAS,MAAM,EAAC;AAElD,QAAA,aAAA,CAAc,IAAK,CAAA;AAAA,UACjB,SAAW,EAAA,EAAA;AAAA,UACX,CAAA,EAAG,OAAO,CAAK,IAAA,CAAA;AAAA,UACf,CAAA,EAAG,OAAO,CAAK,IAAA,CAAA;AAAA,UACf,KAAA,EAAO,OAAO,CAAK,IAAA,EAAA;AAAA,UACnB,MAAA,EAAQ,OAAO,CAAK,IAAA,CAAA;AAAA,UACpB,OAAS,EAAA,IAAA;AAAA,UACT,SAAW,EAAA,IAAA;AAAA,UACX,SAAW,EAAA;AAAA,SACZ,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAO,OAAA;AAAA,MACL,QAAU,EAAA,MAAA,CAAO,MAAO,CAAA,eAAe,CACpC,CAAA,IAAA;AAAA,QAAK,CAAC,CAAA,EAAG,CACR,KAAA,CAAA,CAAE,KAAS,IAAA,CAAA,CAAE,KAAQ,GAAA,CAAA,CAAE,KAAM,CAAA,aAAA,CAAc,CAAE,CAAA,KAAK,CAAI,GAAA;AAAA,OAEvD,CAAA,GAAA,CAAI,CAAK,CAAA,KAAA,CAAA,CAAE,KAAK,CAAA;AAAA,MACnB,MAAQ,EAAA;AAAA,KACV;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,CAAC,CAAC,CAAA;AAEnB,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA;AAAA,UACN,uCAAyC,EAAA;AAAA,YACvC,eACE,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SACnB,mCACA,GAAA;AAAA;AACR;AACF;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,MAAA;AAAA,QACA,gBAAkB,EAAA,KAAA;AAAA,QAClB,WAAY,EAAA,UAAA;AAAA,QACZ,KAAA,EAAO,EAAE,MAAA,EAAQ,OAAQ,EAAA;AAAA,QAExB;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CustomizableGrid.esm.js","sources":["../../src/components/CustomizableGrid.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// This complete read-only home page grid picks up the idea and styles from\n// https://github.com/backstage/backstage/blob/master/plugins/home\n// Esp. from the CustomHomepageGrid component:\n// https://github.com/backstage/backstage/blob/master/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx\n// but without the drag and drop functionality.\n\nimport type { ReactElement } from 'react';\nimport { useMemo, useRef } from 'react';\n\nimport {\n  CustomHomepageGrid,\n  LayoutConfiguration,\n} from '@backstage/plugin-home';\nimport {\n  ComponentParts,\n  createCardExtension,\n} from '@backstage/plugin-home-react';\n\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport { useTheme } from '@mui/material/styles';\n\n// Removes the doubled scrollbar\nimport 'react-grid-layout/css/styles.css';\n\nimport { HomePageCardMountPoint } from '../types';\nimport { dynamicHomePagePlugin } from '../plugin';\nimport { useTranslation } from '../hooks/useTranslation';\nimport { useContainerQuery } from '../hooks/useContainerQuery';\nimport {\n  isCardADefaultConfiguration,\n  getCardTitle,\n  getCardDescription,\n} from '../utils/customizable-cards';\n\n/**\n * @public\n */\nexport interface CustomizableGridProps {\n  mountPoints: HomePageCardMountPoint[];\n}\n\n/**\n * @public\n */\nexport const CustomizableGrid = ({ mountPoints }: CustomizableGridProps) => {\n  const theme = useTheme();\n  const { t } = useTranslation();\n  const gridContainerRef = useRef<HTMLDivElement>(null);\n  useContainerQuery(gridContainerRef, { notifyWindowResize: true });\n\n  const { children, config } = useMemo(() => {\n    // Children contains the additional / available cards a user can add.\n    // Maps the card name to the actual card component.\n    // Contains also the title to allow sorting before rendering.\n    const childDictionary: Record<\n      string,\n      { child: ReactElement; title: string | undefined }\n    > = {};\n\n    // Config contains the default layout of the homepage\n    const defaultConfig: LayoutConfiguration[] = [];\n\n    mountPoints.forEach(mountPoint => {\n      if (!mountPoint.config?.id) {\n        return;\n      }\n      const id = mountPoint.config.id;\n      const title = getCardTitle(t, mountPoint);\n      const description = getCardDescription(t, mountPoint);\n\n      const automaticallyWrapInInfoCard = false;\n\n      const componentParts: ComponentParts = {\n        Content: props => (\n          <mountPoint.Component {...mountPoint.config!.props} {...props} />\n        ),\n        // Untested and unsupported for now!\n        Actions: mountPoint.Actions as () => JSX.Element,\n        // Untested and unsupported for now!\n        Settings: mountPoint.Settings as () => JSX.Element,\n        // This is a workaround to NOT automatically wrap in an InfoCard\n        ContextProvider: automaticallyWrapInInfoCard\n          ? undefined\n          : props => (\n              <mountPoint.Component {...mountPoint.config!.props} {...props} />\n            ),\n      };\n\n      const cardExtension = createCardExtension({\n        name: id,\n        title,\n        description,\n        layout: mountPoint.config.cardLayout,\n        settings: mountPoint.config.settings,\n        components: () => Promise.resolve(componentParts),\n      });\n\n      const Card = dynamicHomePagePlugin.provide(cardExtension);\n\n      childDictionary[id] = {\n        child: <Card />,\n        title,\n      };\n\n      if (isCardADefaultConfiguration(mountPoint)) {\n        const layout = mountPoint.config?.layouts?.xl || {};\n\n        defaultConfig.push({\n          component: id,\n          x: layout.x ?? 0,\n          y: layout.y ?? 0,\n          width: layout.w ?? 12,\n          height: layout.h ?? 4,\n          movable: true,\n          deletable: true,\n          resizable: true,\n        });\n      }\n    });\n\n    return {\n      children: Object.values(childDictionary)\n        .sort((a, b) =>\n          a.title && b.title ? a.title.localeCompare(b.title) : 0,\n        )\n        .map(e => e.child),\n      config: defaultConfig,\n    };\n  }, [mountPoints, t]);\n\n  return (\n    <>\n      <GlobalStyles\n        styles={{\n          '[class*=\"makeStyles-settingsOverlay\"]': {\n            backgroundColor:\n              theme.palette.mode === 'dark'\n                ? 'rgba(20, 20, 20, 0.95) !important'\n                : 'rgba(40, 40, 40, 0.93) !important',\n          },\n        }}\n      />\n      <div\n        ref={gridContainerRef}\n        style={{ width: '100%', minWidth: 0, boxSizing: 'border-box' }}\n      >\n        <CustomHomepageGrid\n          config={config}\n          preventCollision={false}\n          compactType=\"vertical\"\n          style={{ margin: '-10px' }}\n        >\n          {children}\n        </CustomHomepageGrid>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/EntitySection/EntityCard.esm.js

@@ -19,14 +19,19 @@ const EntityCard = ({
     {
       elevation: 0,
       sx: {
+        height: "100%",
         border: (theme) => `1px solid ${theme.palette.grey[400]}`,
         overflow: "auto",
-        maxHeight: "100%"
+        display: "flex",
+        flexDirection: "column"
       },
       children: /* @__PURE__ */ jsxs(
         CardContent,
         {
           sx: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
             pb: 2,
             "&:last-child": {
               pb: 2

package/dist/components/EntitySection/EntityCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityCard.esm.js","sources":["../../../src/components/EntitySection/EntityCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { FC } from 'react';\n\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\nimport { MarkdownContent } from '@backstage/core-components';\n\nimport CardContent from '@mui/material/CardContent';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\n\nimport TagList from './TagList';\n\ninterface EntityCardProps {\n  title: string;\n  version?: string;\n  description: string;\n  tags: string[];\n  kind: string;\n  entity: Entity;\n}\n\nconst EntityCard: FC<EntityCardProps> = ({\n  title,\n  description,\n  tags,\n  kind,\n  entity,\n}) => {\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        border: theme => `1px solid ${theme.palette.grey[400]}`,\n        overflow: 'auto',\n        maxHeight: '100%',\n      }}\n    >\n      <CardContent\n        sx={{\n          pb: 2,\n          '&:last-child': {\n            pb: 2,\n          },\n          backgroundColor: 'transparent',\n        }}\n      >\n        <Box sx={{ overflow: 'hidden' }}>\n          <EntityRefLink\n            entityRef={entity}\n            style={{\n              display: '-webkit-box',\n              WebkitBoxOrient: 'vertical',\n              WebkitLineClamp: 1,\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              fontSize: '0.875rem',\n              fontWeight: '500',\n              textDecoration: 'underline',\n            }}\n          >\n            {title}\n          </EntityRefLink>\n        </Box>\n        <Box\n          sx={{\n            pt: 2,\n            height: '175px',\n            overflow: 'hidden',\n          }}\n        >\n          <Typography\n            variant=\"body2\"\n            paragraph\n            sx={{\n              display: '-webkit-box',\n              WebkitLineClamp: 8,\n              WebkitBoxOrient: 'vertical',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              '& p': {\n                margin: 'auto',\n              },\n            }}\n          >\n            <MarkdownContent content={description} />\n          </Typography>\n        </Box>\n        <TagList kind={kind} tags={tags} />\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default EntityCard;\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,aAAkC,CAAC;AAAA,EACvC,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,CAAA;AAAA,MACX,EAAI,EAAA;AAAA,QACF,QAAQ,CAAS,KAAA,KAAA,CAAA,UAAA,EAAa,MAAM,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,QACrD,QAAU,EAAA,MAAA;AAAA,QACV,SAAW,EAAA;AAAA,OACb;AAAA,MAEA,QAAA,kBAAA,IAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,EAAI,EAAA,CAAA;AAAA,YACJ,cAAgB,EAAA;AAAA,cACd,EAAI,EAAA;AAAA,aACN;AAAA,YACA,eAAiB,EAAA;AAAA,WACnB;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,QAAA,EAAU,UACnB,EAAA,QAAA,kBAAA,GAAA;AAAA,cAAC,aAAA;AAAA,cAAA;AAAA,gBACC,SAAW,EAAA,MAAA;AAAA,gBACX,KAAO,EAAA;AAAA,kBACL,OAAS,EAAA,aAAA;AAAA,kBACT,eAAiB,EAAA,UAAA;AAAA,kBACjB,eAAiB,EAAA,CAAA;AAAA,kBACjB,QAAU,EAAA,QAAA;AAAA,kBACV,YAAc,EAAA,UAAA;AAAA,kBACd,QAAU,EAAA,UAAA;AAAA,kBACV,UAAY,EAAA,KAAA;AAAA,kBACZ,cAAgB,EAAA;AAAA,iBAClB;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA,aAEL,EAAA,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,EAAI,EAAA;AAAA,kBACF,EAAI,EAAA,CAAA;AAAA,kBACJ,MAAQ,EAAA,OAAA;AAAA,kBACR,QAAU,EAAA;AAAA,iBACZ;AAAA,gBAEA,QAAA,kBAAA,GAAA;AAAA,kBAAC,UAAA;AAAA,kBAAA;AAAA,oBACC,OAAQ,EAAA,OAAA;AAAA,oBACR,SAAS,EAAA,IAAA;AAAA,oBACT,EAAI,EAAA;AAAA,sBACF,OAAS,EAAA,aAAA;AAAA,sBACT,eAAiB,EAAA,CAAA;AAAA,sBACjB,eAAiB,EAAA,UAAA;AAAA,sBACjB,QAAU,EAAA,QAAA;AAAA,sBACV,YAAc,EAAA,UAAA;AAAA,sBACd,KAAO,EAAA;AAAA,wBACL,MAAQ,EAAA;AAAA;AACV,qBACF;AAAA,oBAEA,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,WAAa,EAAA;AAAA;AAAA;AACzC;AAAA,aACF;AAAA,4BACA,GAAA,CAAC,OAAQ,EAAA,EAAA,IAAA,EAAY,IAAY,EAAA;AAAA;AAAA;AAAA;AACnC;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"EntityCard.esm.js","sources":["../../../src/components/EntitySection/EntityCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { FC } from 'react';\n\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\nimport { MarkdownContent } from '@backstage/core-components';\n\nimport CardContent from '@mui/material/CardContent';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\n\nimport TagList from './TagList';\n\ninterface EntityCardProps {\n  title: string;\n  version?: string;\n  description: string;\n  tags: string[];\n  kind: string;\n  entity: Entity;\n}\n\nconst EntityCard: FC<EntityCardProps> = ({\n  title,\n  description,\n  tags,\n  kind,\n  entity,\n}) => {\n  return (\n    <Card\n      elevation={0}\n      sx={{\n        height: '100%',\n        border: theme => `1px solid ${theme.palette.grey[400]}`,\n        overflow: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <CardContent\n        sx={{\n          flex: 1,\n          display: 'flex',\n          flexDirection: 'column',\n          pb: 2,\n          '&:last-child': {\n            pb: 2,\n          },\n          backgroundColor: 'transparent',\n        }}\n      >\n        <Box sx={{ overflow: 'hidden' }}>\n          <EntityRefLink\n            entityRef={entity}\n            style={{\n              display: '-webkit-box',\n              WebkitBoxOrient: 'vertical',\n              WebkitLineClamp: 1,\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              fontSize: '0.875rem',\n              fontWeight: '500',\n              textDecoration: 'underline',\n            }}\n          >\n            {title}\n          </EntityRefLink>\n        </Box>\n        <Box\n          sx={{\n            pt: 2,\n            height: '175px',\n            overflow: 'hidden',\n          }}\n        >\n          <Typography\n            variant=\"body2\"\n            paragraph\n            sx={{\n              display: '-webkit-box',\n              WebkitLineClamp: 8,\n              WebkitBoxOrient: 'vertical',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              '& p': {\n                margin: 'auto',\n              },\n            }}\n          >\n            <MarkdownContent content={description} />\n          </Typography>\n        </Box>\n        <TagList kind={kind} tags={tags} />\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default EntityCard;\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,aAAkC,CAAC;AAAA,EACvC,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,CAAA;AAAA,MACX,EAAI,EAAA;AAAA,QACF,MAAQ,EAAA,MAAA;AAAA,QACR,QAAQ,CAAS,KAAA,KAAA,CAAA,UAAA,EAAa,MAAM,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,QACrD,QAAU,EAAA,MAAA;AAAA,QACV,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA;AAAA,OACjB;AAAA,MAEA,QAAA,kBAAA,IAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,IAAM,EAAA,CAAA;AAAA,YACN,OAAS,EAAA,MAAA;AAAA,YACT,aAAe,EAAA,QAAA;AAAA,YACf,EAAI,EAAA,CAAA;AAAA,YACJ,cAAgB,EAAA;AAAA,cACd,EAAI,EAAA;AAAA,aACN;AAAA,YACA,eAAiB,EAAA;AAAA,WACnB;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,QAAA,EAAU,UACnB,EAAA,QAAA,kBAAA,GAAA;AAAA,cAAC,aAAA;AAAA,cAAA;AAAA,gBACC,SAAW,EAAA,MAAA;AAAA,gBACX,KAAO,EAAA;AAAA,kBACL,OAAS,EAAA,aAAA;AAAA,kBACT,eAAiB,EAAA,UAAA;AAAA,kBACjB,eAAiB,EAAA,CAAA;AAAA,kBACjB,QAAU,EAAA,QAAA;AAAA,kBACV,YAAc,EAAA,UAAA;AAAA,kBACd,QAAU,EAAA,UAAA;AAAA,kBACV,UAAY,EAAA,KAAA;AAAA,kBACZ,cAAgB,EAAA;AAAA,iBAClB;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA,aAEL,EAAA,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,EAAI,EAAA;AAAA,kBACF,EAAI,EAAA,CAAA;AAAA,kBACJ,MAAQ,EAAA,OAAA;AAAA,kBACR,QAAU,EAAA;AAAA,iBACZ;AAAA,gBAEA,QAAA,kBAAA,GAAA;AAAA,kBAAC,UAAA;AAAA,kBAAA;AAAA,oBACC,OAAQ,EAAA,OAAA;AAAA,oBACR,SAAS,EAAA,IAAA;AAAA,oBACT,EAAI,EAAA;AAAA,sBACF,OAAS,EAAA,aAAA;AAAA,sBACT,eAAiB,EAAA,CAAA;AAAA,sBACjB,eAAiB,EAAA,UAAA;AAAA,sBACjB,QAAU,EAAA,QAAA;AAAA,sBACV,YAAc,EAAA,UAAA;AAAA,sBACd,KAAO,EAAA;AAAA,wBACL,MAAQ,EAAA;AAAA;AACV,qBACF;AAAA,oBAEA,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,WAAa,EAAA;AAAA;AAAA;AACzC;AAAA,aACF;AAAA,4BACA,GAAA,CAAC,OAAQ,EAAA,EAAA,IAAA,EAAY,IAAY,EAAA;AAAA;AAAA;AAAA;AACnC;AAAA,GACF;AAEJ;;;;"}

package/dist/components/EntitySection/EntitySection.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, Fragment } from 'react';
+import { useState, useRef, useEffect, useCallback, Fragment } from 'react';
 import { Link, WarningPanel, CodeSnippet } from '@backstage/core-components';
 import { useUserProfile } from '@backstage/plugin-user-settings';
 import Grid from '@mui/material/Grid';
@@ -12,14 +12,14 @@ import CloseIcon from '@mui/icons-material/Close';
 import CircularProgress from '@mui/material/CircularProgress';
 import CardContent from '@mui/material/CardContent';
 import { styled, useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import EntityCard from './EntityCard.esm.js';
 import { ViewMoreLink } from './ViewMoreLink.esm.js';
 import HomePageEntityIllustration from '../../images/homepage-entities-1.svg';
 import { useEntities } from '../../hooks/useEntities.esm.js';
 import { hasEntityIllustrationUserDismissed, addDismissedEntityIllustrationUsers } from '../../utils/utils.esm.js';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import { Trans } from '../Trans.esm.js';
+import { containerGridItemSx } from '../../utils/GridItem.esm.js';
+import { useContainerQuery } from '../../hooks/useContainerQuery.esm.js';
 
 const StyledLink = styled(Link)(({ theme }) => ({
   textDecoration: "none",
@@ -36,26 +36,31 @@ const EntitySection = () => {
   const [isRemoveFirstCard, setIsRemoveFirstCard] = useState(false);
   const [showDiscoveryCard, setShowDiscoveryCard] = useState(true);
   const [imgLoaded, setImgLoaded] = useState(false);
-  const [isMediumBreakpoint, setIsMediumBreakpoint] = useState(false);
-  const isMd = useMediaQuery(theme.breakpoints.only("md"));
-  useEffect(() => {
-    if (isMd) {
-      setIsMediumBreakpoint(true);
-    } else {
-      setIsMediumBreakpoint(false);
-    }
-  }, [isMd]);
+  const containerRef = useRef(null);
+  const containerSize = useContainerQuery(containerRef);
+  const entityCardCount = containerSize === "xs" || containerSize === "sm" ? 2 : 4;
+  const illustrationWidthMap = {
+    md: 180,
+    lg: 220,
+    xl: 266
+  };
+  const illustrationWidth = illustrationWidthMap[containerSize] ?? 266;
+  const visibleEntitiesCount = (() => {
+    const isWide = containerSize === "xl" || containerSize === "lg" || containerSize === "md";
+    if (!isWide) return entityCardCount;
+    return isRemoveFirstCard ? entityCardCount : entityCardCount - 2;
+  })();
   useEffect(() => {
     const isUserDismissedEntityIllustration = hasEntityIllustrationUserDismissed(displayName);
     setIsRemoveFirstCard(isUserDismissedEntityIllustration);
   }, [displayName]);
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     setShowDiscoveryCard(false);
     setTimeout(() => {
       addDismissedEntityIllustrationUsers(displayName);
       setIsRemoveFirstCard(true);
     }, 500);
-  };
+  }, [displayName]);
   const { data, error, isLoading } = useEntities({
     kind: ["Component", "API", "Resource", "System"]
   });
@@ -83,14 +88,13 @@ const EntitySection = () => {
       }
     ) });
   } else {
-    let entityCardCount = 2;
-    if (isMediumBreakpoint) entityCardCount = 3;
     content = /* @__PURE__ */ jsx(Box, { sx: { padding: "8px 8px 8px 0" }, children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, alignItems: "stretch", children: [
-      !isRemoveFirstCard && !profileLoading && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, lg: 5, children: /* @__PURE__ */ jsxs(
+      !isRemoveFirstCard && !profileLoading && containerSize !== "xs" && containerSize !== "sm" && /* @__PURE__ */ jsx(Grid, { item: true, sx: containerGridItemSx({ md: 4 }), children: /* @__PURE__ */ jsx(
         Card,
         {
           elevation: 0,
           sx: {
+            height: "100%",
             border: `1px solid ${theme.palette.grey[400]}`,
             display: "flex",
             flexDirection: "row",
@@ -100,57 +104,74 @@ const EntitySection = () => {
             opacity: showDiscoveryCard ? 1 : 0,
             transform: showDiscoveryCard ? "translateX(0)" : "translateX(-50px)"
           },
-          children: [
-            !imgLoaded && /* @__PURE__ */ jsx(
-              Skeleton,
-              {
-                variant: "rectangular",
-                height: 300,
-                sx: {
-                  borderRadius: 3,
-                  width: "clamp(140px, 14vw, 266px)"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                component: "img",
-                src: HomePageEntityIllustration,
-                onLoad: () => setImgLoaded(true),
-                alt: "",
-                height: 300,
-                sx: {
-                  width: "clamp(140px, 14vw, 266px)"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxs(Box, { sx: { p: 2 }, children: [
-              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", paragraph: true, children: t("entities.description") }) }),
-              entities?.length > 0 && /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  onClick: handleClose,
-                  "aria-label": t("entities.close"),
-                  style: {
-                    position: "absolute",
-                    top: "8px",
-                    right: "8px"
-                  },
-                  children: /* @__PURE__ */ jsx(CloseIcon, { style: { width: "16px", height: "16px" } })
-                }
-              )
-            ] })
-          ]
+          children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center"
+              },
+              children: [
+                !imgLoaded && /* @__PURE__ */ jsx(
+                  Skeleton,
+                  {
+                    variant: "rectangular",
+                    height: 300,
+                    sx: {
+                      borderRadius: 3,
+                      width: illustrationWidth
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "img",
+                    src: HomePageEntityIllustration,
+                    onLoad: () => setImgLoaded(true),
+                    alt: "",
+                    height: 300,
+                    sx: {
+                      width: illustrationWidth
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Box, { sx: { p: 2 }, children: [
+                  /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", paragraph: true, children: t("entities.description") }) }),
+                  entities?.length > 0 && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      onClick: handleClose,
+                      "aria-label": t("entities.close"),
+                      style: {
+                        position: "absolute",
+                        top: "8px",
+                        right: "8px"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        CloseIcon,
+                        {
+                          style: { width: "16px", height: "16px" }
+                        }
+                      )
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         }
-      ) }, "entities illustration"),
-      entities?.slice(0, isRemoveFirstCard ? 4 : entityCardCount).map((item) => /* @__PURE__ */ jsx(
+      ) }),
+      entities?.slice(0, visibleEntitiesCount).map((item) => /* @__PURE__ */ jsx(
         Grid,
         {
           item: true,
-          xs: 12,
-          md: 6,
-          lg: isRemoveFirstCard ? 3 : 3.5,
+          sx: containerGridItemSx({
+            xs: 12,
+            sm: 6,
+            md: isRemoveFirstCard ? 3 : 4
+          }),
           children: /* @__PURE__ */ jsx(
             EntityCard,
             {
@@ -165,36 +186,47 @@ const EntitySection = () => {
         },
         item.metadata.name
       )),
-      entities?.length === 0 && /* @__PURE__ */ jsx(Grid, { item: true, md: isRemoveFirstCard ? 12 : 7, children: /* @__PURE__ */ jsx(
-        Box,
+      entities?.length === 0 && /* @__PURE__ */ jsx(
+        Grid,
         {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            minHeight: 300,
-            border: (muiTheme) => `1px solid ${muiTheme.palette.grey[400]}`,
-            borderRadius: 3,
-            overflow: "hidden"
-          },
-          children: /* @__PURE__ */ jsxs(CardContent, { children: [
-            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1.125rem", fontWeight: 500 }, children: t("entities.empty") }),
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                sx: {
-                  fontSize: "0.875rem",
-                  fontWeight: 400,
-                  mt: "20px",
-                  mb: "16px"
-                },
-                children: t("entities.emptyDescription")
-              }
-            ),
-            /* @__PURE__ */ jsx(StyledLink, { to: "/catalog-import", underline: "none", children: t("entities.register") })
-          ] })
+          item: true,
+          sx: containerGridItemSx({
+            sm: 12,
+            md: isRemoveFirstCard ? 12 : 8
+          }),
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                height: "100%",
+                minHeight: 300,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: (muiTheme) => `1px solid ${muiTheme.palette.grey[400]}`,
+                borderRadius: 3,
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsxs(CardContent, { children: [
+                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1.125rem", fontWeight: 500 }, children: t("entities.empty") }),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    sx: {
+                      fontSize: "0.875rem",
+                      fontWeight: 400,
+                      mt: "20px",
+                      mb: "16px"
+                    },
+                    children: t("entities.emptyDescription")
+                  }
+                ),
+                /* @__PURE__ */ jsx(StyledLink, { to: "/catalog-import", underline: "none", children: t("entities.register") })
+              ] })
+            }
+          )
         }
-      ) })
+      )
     ] }) }) });
   }
   return /* @__PURE__ */ jsxs(
@@ -204,7 +236,9 @@ const EntitySection = () => {
       sx: {
         padding: "24px",
         border: (muitheme) => `1px solid ${muitheme.palette.grey[300]}`,
-        overflow: "auto"
+        containerType: "inline-size",
+        display: "flex",
+        flexDirection: "column"
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -215,19 +249,28 @@ const EntitySection = () => {
               display: "flex",
               alignItems: "center",
               fontWeight: "500",
-              fontSize: "1.5rem"
+              fontSize: "1.5rem",
+              flexShrink: 0
             },
             children: t("entities.title")
           }
         ),
-        content,
-        entities?.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { pt: 2 }, children: /* @__PURE__ */ jsx(ViewMoreLink, { to: "/catalog", children: /* @__PURE__ */ jsx(
-          Trans,
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            message: "entities.viewAll",
-            params: { count: data?.totalItems?.toString() || "" }
+            ref: containerRef,
+            sx: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              mt: 1
+            },
+            children: [
+              content,
+              entities?.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { pt: 2 }, children: /* @__PURE__ */ jsx(ViewMoreLink, { to: "/catalog", children: t("entities.browseTheCatalog") }) })
+            ]
           }
-        ) }) })
+        )
       ]
     }
   );