refactor(catalog): use Grid.Item colSpan for full-width AboutFields

Replace inline `style={{ gridColumn: '1 / -1' }}` with BUI-native
`Grid.Item colSpan` for full-width fields in AboutContent. Extract
grid columns into a shared variable used by both Grid.Root and
Grid.Item to keep them in sync.

Remove the `style` prop from AboutField that was only added to
support the inline gridColumn approach.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

plugins/catalog/src/components/AboutCard/AboutContent.tsx

@@ -114,20 +114,21 @@ export function AboutContent(props: AboutContentProps) {
     entitySourceLocation = undefined;
   }
 
+  const columns = { initial: '1', sm: '2', lg: '3' } as const;
+
   return (
-    <Grid.Root columns={{ initial: '1', sm: '2', lg: '3' }} gap="3">
-      <AboutField
-        label={t('aboutCard.descriptionField.label')}
-        style={{ gridColumn: '1 / -1' }}
-      >
-        <MarkdownContent
-          className={classes.description}
-          content={
-            entity?.metadata?.description ||
-            t('aboutCard.descriptionField.value')
-          }
-        />
-      </AboutField>
+    <Grid.Root columns={columns} gap="3">
+      <Grid.Item colSpan={columns}>
+        <AboutField label={t('aboutCard.descriptionField.label')}>
+          <MarkdownContent
+            className={classes.description}
+            content={
+              entity?.metadata?.description ||
+              t('aboutCard.descriptionField.value')
+            }
+          />
+        </AboutField>
+      </Grid.Item>
       <AboutField
         label={t('aboutCard.ownerField.label')}
         value={t('aboutCard.ownerField.value')}
@@ -213,24 +214,25 @@ export function AboutContent(props: AboutContentProps) {
         ))}
       </AboutField>
       {isLocation && (entity?.spec?.targets || entity?.spec?.target) && (
-        <AboutField
-          label={t('aboutCard.targetsField.label')}
-          style={{ gridColumn: '1 / -1' }}
-        >
-          <LinksGridList
-            cols={1}
-            items={((entity.spec.targets as JsonArray) || [entity.spec.target])
-              .map(target => target as string)
-              .map(target => ({
-                text: target,
-                href: getLocationTargetHref(
-                  target,
-                  (entity?.spec?.type || t('aboutCard.unknown')) as string,
-                  entitySourceLocation!,
-                ),
-              }))}
-          />
-        </AboutField>
+        <Grid.Item colSpan={columns}>
+          <AboutField label={t('aboutCard.targetsField.label')}>
+            <LinksGridList
+              cols={1}
+              items={(
+                (entity.spec.targets as JsonArray) || [entity.spec.target]
+              )
+                .map(target => target as string)
+                .map(target => ({
+                  text: target,
+                  href: getLocationTargetHref(
+                    target,
+                    (entity?.spec?.type || t('aboutCard.unknown')) as string,
+                    entitySourceLocation!,
+                  ),
+                }))}
+            />
+          </AboutField>
+        </Grid.Item>
       )}
     </Grid.Root>
   );

plugins/catalog/src/components/AboutCard/AboutField.tsx

@@ -17,7 +17,7 @@
 import { useElementFilter } from '@backstage/core-plugin-api';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
-import { CSSProperties, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { catalogTranslationRef } from '../../alpha/translation';
 
@@ -50,19 +50,11 @@ export interface AboutFieldProps {
   gridSizes?: Record<string, number>;
   children?: ReactNode;
   className?: string;
-  style?: CSSProperties;
 }
 
 /** @public */
 export function AboutField(props: AboutFieldProps) {
-  const {
-    label,
-    value,
-    gridSizes: _gridSizes,
-    children,
-    className,
-    style,
-  } = props;
+  const { label, value, gridSizes: _gridSizes, children, className } = props;
   const classes = useStyles();
   const { t } = useTranslationRef(catalogTranslationRef);
 
@@ -78,7 +70,7 @@ export function AboutField(props: AboutFieldProps) {
       </Typography>
     );
   return (
-    <div className={className} style={style}>
+    <div className={className}>
       <Typography variant="h2" className={classes.label}>
         {label}
       </Typography>