diff --git a/.changeset/purple-deer-bet.md b/.changeset/purple-deer-bet.md new file mode 100644 index 0000000000..c60f2ada7a --- /dev/null +++ b/.changeset/purple-deer-bet.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-graph': patch +--- + +Ensure the catalog graph entity card respects the height prop so the visualization scales down properly on wide screens. diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index 2f07b89d3f..b08404f63b 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx @@ -38,22 +38,27 @@ import { import { useTranslationRef } from '@backstage/frontend-plugin-api'; import { catalogGraphTranslationRef } from '../../translation'; import { Direction, EntityNode } from '../../lib/types'; +import classNames from 'classnames'; /** @public */ export type CatalogGraphCardClassKey = 'card' | 'graph'; -const useStyles = makeStyles( +const useStyles = makeStyles( { card: ({ height }) => ({ display: 'flex', flexDirection: 'column', - maxHeight: height, - minHeight: height, + ...(height && { + height, + maxHeight: height, + minHeight: height, + }), }), - graph: { - flex: 1, + graph: ({ height }) => ({ + flex: height ? '0 0 auto' : 1, minHeight: 0, - }, + ...(height && { height }), + }), }, { name: 'PluginCatalogGraphCatalogGraphCard' }, ); @@ -142,7 +147,7 @@ export const CatalogGraphCard = ( {...props} rootEntityNames={rootEntityNames || entityName} onNodeClick={onNodeClick || defaultOnNodeClick} - className={className || classes.graph} + className={classNames(classes.graph, className)} maxDepth={maxDepth} unidirectional={unidirectional} mergeRelations={mergeRelations}