🕸️ Tidy GraphqlItem markup; render Enum values as a table (#61435)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: heiskr

src/graphql/components/Enum.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useTranslation } from '@/languages/components/useTranslation'
 import { GraphqlItem } from './GraphqlItem'
 import type { EnumT } from './types'
@@ -14,18 +12,28 @@ export function Enum({ item }: Props) {
 
   return (
     <GraphqlItem item={item} heading={heading}>
-      {item.values.map((value) => (
-        <React.Fragment key={`${value.name}-${value.description}`}>
-          <p>
-            <strong>{value.name}</strong>
-          </p>
-          <div
-            dangerouslySetInnerHTML={{
-              __html: value.description,
-            }}
-          />
-        </React.Fragment>
-      ))}
+      <table className="fields width-full table-fixed">
+        <thead>
+          <tr>
+            <th>{t('reference.name')}</th>
+            <th>{t('reference.description')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {item.values.map((value) => (
+            <tr key={`${value.name}-${value.description}`}>
+              <td>
+                <code>{value.name}</code>
+              </td>
+              <td
+                dangerouslySetInnerHTML={{
+                  __html: value.description,
+                }}
+              />
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </GraphqlItem>
   )
 }

src/graphql/components/GraphqlItem.tsx

@@ -11,28 +11,28 @@ type Props = {
 }
 
 export function GraphqlItem({ item, heading, children, headingLevel = 2 }: Props) {
-  const lowerCaseName = item.name.toLowerCase()
+  const slug = item.name.toLowerCase()
+  const hasNotice = Boolean(item.preview || item.isDeprecated)
+
   return (
-    <div>
-      <HeadingLink
-        as={headingLevel === 2 ? 'h2' : headingLevel === 3 ? 'h3' : 'h6'}
-        slug={lowerCaseName}
-      >
+    <>
+      <HeadingLink as={headingLevel === 2 ? 'h2' : headingLevel === 3 ? 'h3' : 'h6'} slug={slug}>
         {item.name}
       </HeadingLink>
       <div
+        className="graphql-item-description"
         dangerouslySetInnerHTML={{
           __html: item.description,
         }}
       />
-      <div>
-        {item.preview && <Notice item={item} variant="preview" />}
-        {item.isDeprecated && <Notice item={item} variant="deprecation" />}
-      </div>
-      <div>
-        {heading && <h4 dangerouslySetInnerHTML={{ __html: heading }} />}
-        {children}
-      </div>
-    </div>
+      {hasNotice && (
+        <div>
+          {item.preview && <Notice item={item} variant="preview" />}
+          {item.isDeprecated && <Notice item={item} variant="deprecation" />}
+        </div>
+      )}
+      {heading && <h4 dangerouslySetInnerHTML={{ __html: heading }} />}
+      {children}
+    </>
   )
 }