<pre> is not responsive

[milindvishnoi]

<pre> is not mobile responsive.

[jacobdalamb]

umm repo?

[milindvishnoi]

@benji014628 Please check out this PR

[jasikpark]

A reasonable default for pre's would be overflow-x-auto, no?

[milindvishnoi]

@jasikpark, that works thanks!

[jasikpark]

How did you fix your problem? Isn't this something that should be added to tailwind-typography?

[milindvishnoi]

So for me, my project is using prism for something (idk why tho), which overrides the tailwind typography classes.

Therefore, I think tailwind typography is okay.

[jasikpark]

Ah, I see!

[vhscom]

There's a horizontal overflow issue when a pre exists within prose content in typography 0.5.0 when used with tailwind 3.0.15. It looks just as OP describes. And it has nothing to do with Prism.

The issue occurs when the user attempts to center prose content by wrapping in inside a grid or flex container. To avoid this issue users can center-align prose content by not using flex or grid and instead using prose mx-auto. To reproduce the issue the pre must have at least one line of content that is long enough to trigger horizontal overflow on a mobile viewport.

[marcuspoehls]

In my case, I used a grid sm:grid-cols-1 layout. This sm: breakpoint caused the overflow issue for me. I had to use grid grid-cols-1 instead and things are working fine.

[jeffoxd]

still an issue to this date, is there any chance of this changing? imo i found the best way to do it is to do mx-auto