Marked as helpful by the asker
overflow-x-hidden treats the symptom. The cause is almost always a grid child with min-width: auto, so long content (a URL, a code string) forces the column wider than the screen.
Add min-w-0 to the grid children and let long text break:
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="min-w-0 break-words">…</div>
</div>Remove the body overflow hack afterwards, it also breaks sticky headers on iOS.