feat(readme): make the entity card height configurable

.changeset/wicked-bottles-prove.md

@@ -0,0 +1,18 @@
+---
+'@axis-backstage/plugin-readme': patch
+---
+
+NFS: Make the Readme entity card height configurable
+
+The height of the entity card now defaults to the same height as
+the legacy card. If used in NFS the height can be configured
+using the config as follows:
+
+```yaml
+app:
+  extensions:
+    - entity-card:readme:
+        config:
+          hideIfNotFound: true
+          maxHeight: 500px
+```

plugins/readme/README.md

@@ -106,7 +106,12 @@ const app = createApp({
 });
 ```
 
-3. If necessary, you can also customize the plugin. For example, to hide the card entirely when no README is found (instead of showing an informational message):
+3. If necessary, you can also customize the plugin using the following config options:
+
+| Config key       | Type      | Default   | Description                                                                                                                   |
+| ---------------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `hideIfNotFound` | `boolean` | `false`   | When `true`, the card is hidden entirely if no README file is found, instead of showing an informational message.             |
+| `maxHeight`      | `string`  | `'235px'` | Maximum height of the card content area. Accepts any valid CSS length (e.g. `'500px'`, `'50vh'`) or `'none'` for full height. |
 
 ```yaml
 # app-config.yaml
@@ -115,6 +120,7 @@ app:
     - entity-card:readme:
         config:
           hideIfNotFound: true
+          maxHeight: 500px
 ```
 
 ## Layout

plugins/readme/report-alpha.api.md

@@ -37,11 +37,13 @@ const _default: OverridableFrontendPlugin<
     'entity-card:readme': OverridableExtensionDefinition<{
       config: {
         hideIfNotFound: boolean;
+        maxHeight: string;
         filter: FilterPredicate | undefined;
         type: 'content' | 'info' | undefined;
       };
       configInput: {
         hideIfNotFound?: boolean | undefined;
+        maxHeight?: string | undefined;
         filter?: FilterPredicate | undefined;
         type?: 'content' | 'info' | undefined | undefined;
       };

plugins/readme/report.api.md

@@ -33,6 +33,7 @@ export type ReadmeCardLegacyProps = {
 // @public
 export type ReadmeCardProps = {
   hideIfNotFound?: boolean;
+  maxHeight?: string | number;
 };
 
 // @public

plugins/readme/src/alpha.tsx

@@ -50,12 +50,33 @@ const readmeCard = EntityCardBlueprint.makeWithOverrides({
      * ```
      */
     hideIfNotFound: z.boolean().default(false),
+    /**
+     * Sets the maximum height of the README card content area. Accepts any
+     * valid CSS length value (e.g. `'235px'`, `'50vh'`) or `'none'` to show
+     * the full content without scrolling.
+     *
+     * Defaults to `'235px'`.
+     *
+     * @example
+     * ```yaml
+     * # app-config.yaml
+     * app:
+     *   extensions:
+     *     - entity-card:readme:
+     *         config:
+     *           maxHeight: 500px
+     * ```
+     */
+    maxHeight: z.string().default('235px'),
   },
   factory(originalFactory, { config }) {
     return originalFactory({
       loader: async () =>
         import('./components/ReadmeCard').then(m => (
-          <m.ReadmeCard hideIfNotFound={config.hideIfNotFound} />
+          <m.ReadmeCard
+            hideIfNotFound={config.hideIfNotFound}
+            maxHeight={config.maxHeight}
+          />
         )),
     });
   },

plugins/readme/src/components/ReadmeCard/ReadmeCard.tsx

@@ -15,6 +15,7 @@ import { ResponseError } from '@backstage/errors';
  */
 export type ReadmeCardProps = {
   hideIfNotFound?: boolean;
+  maxHeight?: string | number;
 };
 
 /**
@@ -33,7 +34,7 @@ export type ReadmeCardLegacyProps = {
 function isLegacyProps(
   props: ReadmeCardProps | ReadmeCardLegacyProps,
 ): props is ReadmeCardLegacyProps {
-  return 'variant' in props || 'maxHeight' in props;
+  return 'variant' in props;
 }
 
 function ReadmeCardLegacy(props: ReadmeCardLegacyProps) {
@@ -91,7 +92,7 @@ function ReadmeCardLegacy(props: ReadmeCardLegacyProps) {
 }
 
 function ReadmeCardNew(props: ReadmeCardProps) {
-  const { hideIfNotFound } = props;
+  const { hideIfNotFound, maxHeight = '235px' } = props;
   const [isFullViewOpen, setIsFullViewOpen] = useFullViewParam();
   const readmeContent = useReadmeContent();
 
@@ -118,7 +119,7 @@ function ReadmeCardNew(props: ReadmeCardProps) {
           </IconButton>
         }
       >
-        <div style={{ overflow: 'auto' }}>
+        <div style={{ overflow: 'auto', maxHeight }}>
           <ReadmeContent {...readmeContent} />
         </div>
       </EntityInfoCard>