Update prop table styles

Author: ryankeairns

packages/docusaurus-theme/src/components/prop_table/prop_table.tsx

@@ -9,6 +9,7 @@ import {
   EuiTitle,
   useEuiMemoizedStyles,
   EuiLink,
+  EuiPanel,
 } from '@elastic/eui';
 import {
   ProcessedComponent,
@@ -51,6 +52,10 @@ const getPropTableStyles = ({ euiTheme }: UseEuiTheme) => ({
     font-weight: ${euiTheme.font.weight.semiBold};
   `,
   description: css`
+    p {
+      font-size: var(--eui-font-size-s);
+    }
+
     p:first-child {
       margin-block-start: 0;
     }
@@ -73,6 +78,9 @@ const getPropTableStyles = ({ euiTheme }: UseEuiTheme) => ({
       display: inline-block;
     }
   `,
+  tableCell: css`
+    vertical-align: text-top;
+  `,
 });
 
 export const PropTable = ({
@@ -173,6 +181,14 @@ export const PropTable = ({
     [definition.displayName]
   );
 
+  const cellProps = useCallback(
+    (item: ProcessedComponentProp) => ({
+      id: getPropId(item, definition.displayName),
+      css: styles.tableCell,
+    }),
+    [definition.displayName]
+  );
+
   return (
     <EuiFlexGroup
       aria-label={`Component properties table for ${definition.displayName}`}
@@ -182,19 +198,23 @@ export const PropTable = ({
     >
       <header css={styles.header}>
         {showTitle && (
-          <EuiTitle size="m">
+          <EuiTitle size="s">
             <HeadingLevel>{definition.displayName}</HeadingLevel>
           </EuiTitle>
         )}
         <PropTableExtendedTypes definition={definition} />
       </header>
-      <EuiBasicTable
-        css={styles.table}
-        width="100%"
-        items={tableItems}
-        columns={columns}
-        rowProps={rowProps}
-      />
+      <EuiPanel color="plain" hasBorder>
+        <EuiBasicTable
+          css={styles.table}
+          width="100%"
+          items={tableItems}
+          columns={columns}
+          rowProps={rowProps}
+          cellProps={cellProps}
+          compressed
+        />
+      </EuiPanel>
     </EuiFlexGroup>
   );
 };