docs: add responsive markdown tables (#2875)

* docs: add responsive markdown tables

* Lint files

Signed-off-by: gpbl <[email protected]>

---------

Signed-off-by: gpbl <[email protected]>

Author: gpbl

website/docs/selections/multiple-mode.mdx

@@ -14,7 +14,7 @@ Set the `mode` prop to `"multiple"` to enable the selection of multiple dates in
   <Examples.Multiple />
 </BrowserWindow>
 
-## Props
+## Multiple Mode Props
 
 | Prop Name  | Type                                                                             | Description                                       |
 | ---------- | -------------------------------------------------------------------------------- | ------------------------------------------------- |

website/docs/selections/range-mode.mdx

@@ -14,7 +14,7 @@ Set the `mode` prop to `"range"` to enable the selection of a continuous range o
   <Examples.Range />
 </BrowserWindow>
 
-## Props
+## Range Mode Props
 
 | Prop Name         | Type                                                                                | Description                                |
 | ----------------- | ----------------------------------------------------------------------------------- | ------------------------------------------ |

website/docs/selections/single-mode.mdx

@@ -14,13 +14,13 @@ When the `mode` prop is set to `"single"`, only one date can be selected at a ti
   <Examples.Single />
 </BrowserWindow>
 
-## Props
+## Single Mode Props
 
-| Prop Name  | Type                                                                                                               | Description                             |
-| ---------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------- |
-| `selected` | `Date \| undefined` ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)) | The selected date.                      |
-| `onSelect` | [`OnSelectHandler<Date \| undefined>`](../api/type-aliases/OnSelectHandler.md)                                     | Event callback when a date is selected. |
-| `required` | `boolean`                                                                                                          | Make the selection required.            |
+| Prop Name  | Type                                                                           | Description                             |
+| ---------- | ------------------------------------------------------------------------------ | --------------------------------------- |
+| `selected` | `Date \| undefined`                                                            | The selected date.                      |
+| `onSelect` | [`OnSelectHandler<Date \| undefined>`](../api/type-aliases/OnSelectHandler.md) | Event callback when a date is selected. |
+| `required` | `boolean`                                                                      | Make the selection required.            |
 
 ## Controlled Selections
 

website/src/css/markdown.css

@@ -1,5 +1,6 @@
 .markdown {
   min-height: calc(100vh - var(--ifm-navbar-height) - 17rem);
+  --doc-table-min-width: 640px;
 }
 
 .markdown a {
@@ -56,9 +57,9 @@
 
 .markdown table {
   margin: 2rem 0;
-  display: table;
   width: 100%;
   font-size: 0.875rem;
+  display: table;
 }
 
 .markdown table tr {
@@ -77,12 +78,33 @@
   font-weight: 600;
   background-color: unset !important;
   text-align: left;
+  white-space: nowrap;
 }
 
 .markdown table thead tr {
   border-bottom-width: 1px;
 }
 
+@media (max-width: 995px) {
+  .table-scroll {
+    margin: 2rem 0;
+    padding-bottom: 0.5rem;
+  }
+
+  .table-scroll table {
+    margin: 0;
+  }
+
+  .table-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .table-scroll table {
+    min-width: var(--doc-table-min-width);
+  }
+}
+
 .markdown details {
   font-size: 0.875rem;
 }

website/src/theme/MDXComponents.ts

@@ -0,0 +1,29 @@
+// Import the original mapper
+import MDXComponents from "@theme-original/MDXComponents";
+import type { ComponentProps, ComponentType } from "react";
+import * as Examples from "react-day-picker/examples";
+
+import * as ExamplesV8 from "../../examples-v8";
+import { BrowserWindow } from "../components/BrowserWindow";
+
+type TableComponent = ComponentType<ComponentProps<"table">>;
+
+const Table: TableComponent =
+  (MDXComponents as { table?: TableComponent }).table ??
+  ((props) => <table {...props} />);
+
+function ResponsiveTable(props: ComponentProps<typeof Table>) {
+  return (
+    <div className="table-scroll" role="presentation">
+      <Table {...props} />
+    </div>
+  );
+}
+
+export default {
+  ...MDXComponents,
+  table: ResponsiveTable,
+  BrowserWindow,
+  Examples,
+  ExamplesV8,
+};