From 75f1e9c5ec0ebe9cb85e93a4d042d2fd0bb569a0 Mon Sep 17 00:00:00 2001
From: Ankur Datta <64993082+ankur-arch@users.noreply.github.com>
Date: Fri, 22 May 2026 21:40:34 +0200
Subject: [PATCH] fix(blog): make post title responsive on mobile

Long blog titles like the Prisma Next EA post broke word-by-word on
mobile because the h1 used a fixed type-title-5xl (4rem). Scale the
title down on smaller screens and add break-words as a safety net.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/blog/src/app/(blog)/[slug]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/blog/src/app/(blog)/[slug]/page.tsx b/apps/blog/src/app/(blog)/[slug]/page.tsx
index 8bac229e23..955d6a2fd0 100644
--- a/apps/blog/src/app/(blog)/[slug]/page.tsx
+++ b/apps/blog/src/app/(blog)/[slug]/page.tsx
@@ -188,7 +188,7 @@ export default async function Page(props: {
           >
             ← Back to Blog
           </Link>
-          <h1 className="mt-3 mb-8 type-title-5xl text-foreground-neutral">
+          <h1 className="mt-3 mb-8 type-title-3xl md:type-title-4xl lg:type-title-5xl text-foreground-neutral break-words hyphens-auto">
             {page.data.title}
           </h1>
           <div className="text-sm flex gap-2 items-center text-foreground-neutral mb-4">