From 91ed1d1eeecd4c28b3eebd284a8e6c419662d3e3 Mon Sep 17 00:00:00 2001
From: Jared Schoeny <jared@schoeny.com>
Date: Fri, 28 Aug 2026 19:27:18 -0600
Subject: [PATCH] Keep long URLs, code, and tables from overflowing hack
 descriptions on mobile. (#85)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/app/globals.css          | 7 +++++++
 src/app/hack/[slug]/page.tsx | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 1068158..ea38c12 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -329,6 +329,11 @@ html { scroll-padding-top: var(--anchor-offset); }
   --tw-prose-code: var(--foreground);
   --tw-prose-hr: var(--border);
   --tw-prose-captions: color-mix(in oklab, var(--foreground) 70%, transparent);
+  overflow-wrap: anywhere;
+}
+
+.prose pre {
+  overflow-x: auto;
 }
 
 .prose * {
@@ -418,6 +423,8 @@ html { scroll-padding-top: var(--anchor-offset); }
 
 .prose table {
   @apply my-6 w-full text-sm text-left text-foreground/70;
+  display: block;
+  overflow-x: auto;
 }
 .prose table th, .prose table td {
   @apply px-6 py-4 border border-zinc-400/30 dark:border-zinc-600/50;
diff --git a/src/app/hack/[slug]/page.tsx b/src/app/hack/[slug]/page.tsx
index f0f4996..34393cd 100644
--- a/src/app/hack/[slug]/page.tsx
+++ b/src/app/hack/[slug]/page.tsx
@@ -477,7 +477,7 @@ export default async function HackDetail({ params }: HackDetailProps) {
       </div>
 
       <div className="mt-6 px-6 flex flex-col gap-6 lg:grid lg:grid-cols-[minmax(0,1fr)_260px]">
-        <div className="space-y-6 lg:min-w-[640px]">
+        <div className="min-w-0 space-y-6 lg:min-w-[640px]">
           <Gallery images={images} title={hack.title} />
 
           {patchId && patchCreatedAt && (