Markdown Rendered Graphs Overflows the Screen

[Type-32]

What version of @tailwindcss/typography are you using?

0.5.10

What version of Node.js are you using?

18.19.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/Type-32/crtl-prototype-studios-website/tree/typography-issue

Describe your issue

The Typography renders the graph to be overflowing the container when screen width is too small like a phone screen.

[reinink]

Hey!

So while our typography plugin ships with basic table styles, it doesn't try to solve overflow issues when your table content is wider than the container it is in.

Here's a quick Tailwind Play illustrating the same issue you're experiencing:

https://play.tailwindcss.com/EsVvCcn0WS

One common way to solve this problem is to introduce horizontal scrolling. This is actually what we do for many of the tables in Tailwind UI (see https://tailwindui.com/components/application-ui/lists/tables).

You can implement this yourself by wrapping your table with a <div> and applying the overflow-x: auto CSS property to it:

<div class="prose max-w-xs">
  <div class="overflow-x-auto">
    <table>
      <!-- ... -->
    </table>
  </div>
</div>

I've put together a Tailwind Play illustrating how to do this:

https://play.tailwindcss.com/gOlsmN3nTB

While it would be nice to handle this automatically in the typography plugin, it's not possible since it requires adding a wrapping <div>, which of course can't be done strictly from CSS alone.

One alternative approach is to allow the words in your table to break using the word-break: break-all CSS property, but generally this isn't great since it makes the content quite difficult to read.

I hope that helps!