fix: improve table styling on mobile / tablet

src/components/MdxComponents/index.js

@@ -31,6 +31,14 @@ const Header = (level, props) => {
   });
 };
 
+const Table = ({...props}) => (
+  <div css={{ display: 'grid' }}>
+    <div css={{ overflowX: 'auto' }}>
+      <table css={table(useTheme())} {...props} />
+    </div>
+  </div>
+);
+
 const Section = (props) => {
   let header = '';
   if (Array.isArray(props.children)) {
@@ -61,7 +69,7 @@ export default {
   blockquote: (props) => <blockquote css={blockquote(useTheme())} {...props} />,
   p: (props) => <p className="paragraph" {...props} />,
   pre: (props) => <pre css={pre} {...props} />,
-  table: (props) => <table css={table(useTheme())} {...props} />,
+  table: (props) => <Table {...props}/>,
   em: emphasis,
   img: (props) => (
     <a href={props.src} target="_blank" rel="noopener noreferrer">

src/styles/index.js

@@ -92,6 +92,9 @@ export const table = (theme) => css`
   border-radius: 4px;
   border-spacing: 0;
   overflow-wrap: normal;
+  ${onMobile} {
+    white-space: pre;
+  }
   thead {
     background-color: ${theme.table.header.background};
     color: ${theme.table.header.font};
@@ -112,6 +115,7 @@ export const table = (theme) => css`
   }
 
   tbody tr {
+    transition: ${theme.transitions.hover};
     border-top: 1px solid ${theme.table.primary};
     margin: 0;
     padding: 0;
@@ -139,6 +143,10 @@ export const table = (theme) => css`
     }
   }
 
+  tbody tr:hover {
+    background-color: ${theme.table.rowHover};
+  }
+
   th :first-child,
   td :first-child {
     margin-top: 0;

src/theme/base.js

@@ -155,6 +155,7 @@ const table = (colors) => ({
   },
   oddRow: colors.mainBackground,
   evenRow: colors.background,
+  rowHover: colors.hover + '3d',
   border: colors.border,
 });