fix(docs/index): overflow issue in install command (#1095)

KevinVandy · Apr 18, 2024 · 4eade9d · 4eade9d
1 parent 7aa7799
commit 4eade9d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/apps/material-react-table-docs/components/mdx/InstallCommand.tsx b/apps/material-react-table-docs/components/mdx/InstallCommand.tsx
@@ -31,6 +31,11 @@ export const InstallCommand = ({
         className="language-bash"
         margin="0"
         style={{ overflowX: 'hidden' }}
+        paperSxProps={{
+          '& .token-line': {
+            overflowX: 'auto',
+          },
+        }}
       >
         {tab === 'npm'
           ? `npm i ${packagesString}`

diff --git a/apps/material-react-table-docs/components/mdx/SampleCodeSnippet.tsx b/apps/material-react-table-docs/components/mdx/SampleCodeSnippet.tsx
@@ -6,6 +6,8 @@ import {
   styled,
   alpha,
   Paper,
+  type SxProps,
+  type Theme,
 } from '@mui/material';
 import { Highlight, themes } from 'prism-react-renderer';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -23,9 +25,10 @@ interface Props {
   enableCopyButton?: boolean;
   style?: CSSProperties;
   margin?: string;
+  paperSxProps?: SxProps<Theme>;
 }
 
-export const SampleCodeSnippet = (props: Props) => {
+export const SampleCodeSnippet = ({ paperSxProps, ...props }: Props) => {
   const theme = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
@@ -66,6 +69,7 @@ export const SampleCodeSnippet = (props: Props) => {
         boxShadow: props.enableCopyButton === false ? 'none' : undefined,
         backgroundImage: 'none',
         backgroundColor: 'transparent',
+        ...paperSxProps,
       }}
     >
       <Highlight