Markdown Table Overflow Issue

[matthew-sessions]

This is the current behavior when you have a table with many columns:

I patched this on my end here: https://github.com/datopian/flowershow/blob/5b4cd3a5bfc8d4898c442a9cbb81fccd1e6f77a3/components/MdxPage.tsx#L12 with:

const components = {
    mermaid: Mermaid,
    pre: Pre,
    table: (props) => (
        <div className="overflow-x-auto">
            <table {...props} />
        </div>
    ),
};

[rufuspollock]

@matthew-sessions nice fix thank-you. We'll look into getting that in to core.

@davidgasquez do you want to check if you can reproduce that?

[davidgasquez]

Was able to reproduce with:

| Tables   |      Are      | Tables   |      Are      | Tables   |      Are      | Tables   |      Are      | Tables   |      Are      | Tables   |      Are      | Tables   |      Are      | Tables   |      Are      | Tables   |      Are      | Tables   |      Are      | Tables   |      Are      | Tables   |      Are      | Tables   |      Are      |  Cool |
|----------|:-------------:|----------|:-------------:|----------|:-------------:|----------|:-------------:|----------|:-------------:|----------|:-------------:|----------|:-------------:|----------|:-------------:|----------|:-------------:|----------|:-------------:|----------|:-------------:|----------|:-------------:|----------|:-------------:|------:|
| col 1 is |  left-aligned | col 1 is |  left-aligned | col 1 is |  left-aligned | col 1 is |  left-aligned | col 1 is |  left-aligned | col 1 is |  left-aligned | col 1 is |  left-aligned | col 1 is |  left-aligned | col 1 is |  left-aligned | col 1 is |  left-aligned | col 1 is |  left-aligned | col 1 is |  left-aligned | col 1 is |  left-aligned | $1600 |
| col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned |    $1 |
| col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned | col 3 is | right-aligned |    $1 |

Adding the proposed change fixes it.

That said, things are still off when you maximice the page in a widescreen.

[olayway]

@davidgasquez, @rufuspollock I've just fixed the layout so now, with @matthew-sessions' fix the tables display correctly even on large screens:

I took the liberty of adding Matthew's fix to the template. Thank you @matthew-sessions 🎉👏