[docs-infra] Fix API table full-width (#40476)

mui · Jan 8, 2024 · c7788e9 · c7788e9
1 parent 69e39c6
commit c7788e9
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 30 deletions.
diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
@@ -7,10 +7,16 @@ import {
   brandingLightTheme as lightTheme,
 } from 'docs/src/modules/brandingTheme';
 import { getHash } from 'docs/src/modules/components/ApiPage/list/ClassesList';
+import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer';
 
 const StyledTable = styled('table')(
   ({ theme }) => ({
     textAlign: 'left',
+    // Override docs/src/modules/components/MarkdownElement styles
+    '&&': {
+      display: 'table',
+      width: '100%',
+    },
     '& .class-name': {
       flexShrink: 0,
       fontWeight: theme.typography.fontWeightSemiBold,
@@ -53,35 +59,39 @@ interface ClassesTableProps {
 export default function ClassesTable(props: ClassesTableProps) {
   const { classes, componentName, displayClassKeys } = props;
   return (
-    <StyledTable>
-      <thead>
-        <tr>
-          <th>Class name</th>
-          {displayClassKeys && <th>Rule name</th>}
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        {classes.map((params) => {
-          const { className, key, description, isGlobal } = params;
+    <StyledTableContainer>
+      <StyledTable>
+        <thead>
+          <tr>
+            <th>Class name</th>
+            {displayClassKeys && <th>Rule name</th>}
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {classes.map((params) => {
+            const { className, key, description, isGlobal } = params;
 
-          return (
-            <tr key={className} id={getHash({ componentName, className: key })}>
-              <td>
-                <span className="class-name">.{className}</span>
-              </td>
-              {displayClassKeys && <td>{!isGlobal && <span className="class-key">{key}</span>}</td>}
-              <td>
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: description || '',
-                  }}
-                />
-              </td>
-            </tr>
-          );
-        })}
-      </tbody>
-    </StyledTable>
+            return (
+              <tr key={className} id={getHash({ componentName, className: key })}>
+                <td>
+                  <span className="class-name">.{className}</span>
+                </td>
+                {displayClassKeys && (
+                  <td>{!isGlobal && <span className="class-key">{key}</span>}</td>
+                )}
+                <td>
+                  <span
+                    dangerouslySetInnerHTML={{
+                      __html: description || '',
+                    }}
+                  />
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </StyledTable>
+    </StyledTableContainer>
   );
 }
diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
@@ -16,6 +16,11 @@ import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/Styl
 
 const StyledTable = styled('table')(
   ({ theme }) => ({
+    // Override docs/src/modules/components/MarkdownElement styles
+    '&&': {
+      display: 'table',
+      width: '100%',
+    },
     '& .type-column': {
       minWidth: '20%',
     },

diff --git a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx
@@ -11,6 +11,11 @@ import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/Styl
 
 const StyledTable = styled('table')(
   ({ theme }) => ({
+    // Override docs/src/modules/components/MarkdownElement styles
+    '&&': {
+      display: 'table',
+      width: '100%',
+    },
     '& .slot-name': {
       fontFamily: theme.typography.fontFamilyCode,
       fontWeight: theme.typography.fontWeightSemiBold,

diff --git a/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx b/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx
@@ -4,7 +4,7 @@ import { brandingDarkTheme as darkTheme } from 'docs/src/modules/brandingTheme';
 const StyledTableContainer = styled('div')(
   ({ theme }) => ({
     borderRadius: 12,
-    overflow: 'hidden',
+    overflowX: 'auto',
     '& table': {
       marginLeft: -1,
       marginRight: -1,