From 278306a28450ec0d83573f3444549de03a727726 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 2 Feb 2026 13:16:44 +0000
Subject: [PATCH] feat: add hyphens-auto to page titles and h1 elements

Apply CSS hyphens: auto to all h1 headings across the site, matching
the existing behavior on prose text. This improves text wrapping for
long titles on narrow viewports, primarily benefiting Firefox users.

https://claude.ai/code/session_01TeX12YsoQYY2Tr1rC25Kkr
---
 apps/web/src/app/[locale]/(main)/[...path]/page.tsx        | 4 +++-
 apps/web/src/app/[locale]/(main)/error.tsx                 | 2 +-
 apps/web/src/app/[locale]/(main)/events/[slug]/page.tsx    | 4 +++-
 apps/web/src/app/[locale]/(main)/global-error.tsx          | 2 +-
 apps/web/src/app/[locale]/(main)/not-found.tsx             | 2 +-
 apps/web/src/app/[locale]/(main)/page.tsx                  | 4 ++--
 apps/web/src/custom-pages/all-events-page.tsx              | 4 +++-
 apps/web/src/custom-pages/events-page.tsx                  | 2 +-
 apps/web/src/custom-pages/weekly-newsletters-list-page.tsx | 2 +-
 9 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/[locale]/(main)/[...path]/page.tsx b/apps/web/src/app/[locale]/(main)/[...path]/page.tsx
index 025d810c..67df4e28 100644
--- a/apps/web/src/app/[locale]/(main)/[...path]/page.tsx
+++ b/apps/web/src/app/[locale]/(main)/[...path]/page.tsx
@@ -160,7 +160,9 @@ async function Page(props: Props) {
         className="relative mb-8 flex flex-col items-center gap-2 md:gap-6"
       >
         <header className="flex h-[15svh] w-full items-center justify-center bg-gray-900 p-2 text-gray-100 md:h-[25svh]">
-          <h1 className="font-mono text-4xl md:text-5xl">{page.title}</h1>
+          <h1 className="font-mono text-4xl hyphens-auto md:text-5xl">
+            {page.title}
+          </h1>
         </header>
 
         <div className="relative m-auto flex max-w-full flex-col gap-8 p-4 md:p-6">
diff --git a/apps/web/src/app/[locale]/(main)/error.tsx b/apps/web/src/app/[locale]/(main)/error.tsx
index 363809c9..46888780 100644
--- a/apps/web/src/app/[locale]/(main)/error.tsx
+++ b/apps/web/src/app/[locale]/(main)/error.tsx
@@ -18,7 +18,7 @@ function ErrorContent({
   return (
     <main className="relative mb-8 flex flex-col items-center gap-2 md:gap-6">
       <header className="flex h-[15svh] w-full items-center justify-center bg-gray-900 p-2 text-gray-100 md:h-[25svh]">
-        <h1 className="font-mono text-4xl md:text-5xl">
+        <h1 className="font-mono text-4xl hyphens-auto md:text-5xl">
           {t("Something went wrong")}
         </h1>
       </header>
diff --git a/apps/web/src/app/[locale]/(main)/events/[slug]/page.tsx b/apps/web/src/app/[locale]/(main)/events/[slug]/page.tsx
index db1879bd..b522d6b7 100644
--- a/apps/web/src/app/[locale]/(main)/events/[slug]/page.tsx
+++ b/apps/web/src/app/[locale]/(main)/events/[slug]/page.tsx
@@ -437,7 +437,9 @@ export default async function Page(props: PageProps) {
       <div className="relative m-auto flex max-w-full flex-col gap-8 p-4 md:p-6">
         <div className="max-w-4xl space-y-4 md:my-8 md:space-y-8">
           <BackButton>{t("Back")}</BackButton>
-          <h1 className="font-mono text-2xl md:text-4xl">{event.data.title}</h1>
+          <h1 className="font-mono text-2xl hyphens-auto md:text-4xl">
+            {event.data.title}
+          </h1>
           <div className="flex flex-col gap-16">
             <div className="flex flex-col gap-4 md:flex-row md:gap-16">
               <div className="flex max-w-xl grow-2 flex-col gap-8">
diff --git a/apps/web/src/app/[locale]/(main)/global-error.tsx b/apps/web/src/app/[locale]/(main)/global-error.tsx
index abf70aad..10862c23 100644
--- a/apps/web/src/app/[locale]/(main)/global-error.tsx
+++ b/apps/web/src/app/[locale]/(main)/global-error.tsx
@@ -20,7 +20,7 @@ function GlobalErrorContent({
           className="relative mb-8 flex flex-col items-center gap-2 md:gap-6"
         >
           <header className="flex h-[15svh] w-full items-center justify-center bg-gray-900 p-2 text-gray-100 md:h-[25svh]">
-            <h1 className="font-mono text-4xl md:text-5xl">
+            <h1 className="font-mono text-4xl hyphens-auto md:text-5xl">
               {t("Something went wrong")}
             </h1>
           </header>
diff --git a/apps/web/src/app/[locale]/(main)/not-found.tsx b/apps/web/src/app/[locale]/(main)/not-found.tsx
index 0e1b36a0..524f4d63 100644
--- a/apps/web/src/app/[locale]/(main)/not-found.tsx
+++ b/apps/web/src/app/[locale]/(main)/not-found.tsx
@@ -15,7 +15,7 @@ function NotFoundContent() {
       className="relative mb-8 flex flex-col items-center gap-2 md:gap-6"
     >
       <header className="flex h-[15svh] w-full items-center justify-center bg-gray-900 p-2 text-gray-100 md:h-[25svh]">
-        <h1 className="font-mono text-4xl md:text-5xl">
+        <h1 className="font-mono text-4xl hyphens-auto md:text-5xl">
           404 - {t("Page not found")}
         </h1>
       </header>
diff --git a/apps/web/src/app/[locale]/(main)/page.tsx b/apps/web/src/app/[locale]/(main)/page.tsx
index 420cd7f6..f0111417 100644
--- a/apps/web/src/app/[locale]/(main)/page.tsx
+++ b/apps/web/src/app/[locale]/(main)/page.tsx
@@ -64,7 +64,7 @@ export default async function Home(props: {
       {/* Desktop view */}
       <div className="container mx-auto hidden grid-cols-2 gap-12 px-6 py-12 lg:grid">
         <section className="order-first space-y-4">
-          <h1 className="font-mono text-4xl font-bold text-gray-900">
+          <h1 className="font-mono text-4xl font-bold hyphens-auto text-gray-900">
             Tietokilta
           </h1>
           <Content content={body} />
@@ -83,7 +83,7 @@ export default async function Home(props: {
           {announcement ? <AnnouncementCard news={announcement} /> : null}
         </div>
         <section className="space-y-4">
-          <h1 className="font-mono text-4xl font-bold text-gray-900">
+          <h1 className="font-mono text-4xl font-bold hyphens-auto text-gray-900">
             Tietokilta
           </h1>
           <Content content={body} />
diff --git a/apps/web/src/custom-pages/all-events-page.tsx b/apps/web/src/custom-pages/all-events-page.tsx
index 43f915ed..8b1ea71e 100644
--- a/apps/web/src/custom-pages/all-events-page.tsx
+++ b/apps/web/src/custom-pages/all-events-page.tsx
@@ -18,7 +18,9 @@ export default async function Page() {
       <div className="relative m-auto flex max-w-full flex-col gap-8 p-4 md:p-6">
         <div className="max-w-4xl space-y-4 md:my-8 md:space-y-8">
           <BackButton>{tAction("Back")}</BackButton>
-          <h1 className="font-mono text-4xl">{tIlmo("All events")}</h1>
+          <h1 className="font-mono text-4xl hyphens-auto">
+            {tIlmo("All events")}
+          </h1>
           <ul className="space-y-8">
             {events.data?.reverse().map((event) => (
               <EventCard event={event} key={event.id} />
diff --git a/apps/web/src/custom-pages/events-page.tsx b/apps/web/src/custom-pages/events-page.tsx
index 519fadbb..404c1b1c 100644
--- a/apps/web/src/custom-pages/events-page.tsx
+++ b/apps/web/src/custom-pages/events-page.tsx
@@ -60,7 +60,7 @@ export default async function Page() {
       <div className="relative m-auto flex max-w-full flex-col gap-8 p-4 md:p-6">
         <div className="max-w-4xl space-y-4 md:my-8 md:space-y-8">
           <BackButton>{tAction("Back")}</BackButton>
-          <h1 className="font-mono text-4xl">{tIlmo("Events")}</h1>
+          <h1 className="font-mono text-4xl hyphens-auto">{tIlmo("Events")}</h1>
           <Calendar events={events.data} />
           <ul className="space-y-8">
             {upcomingEvents.data.map((event) => (
diff --git a/apps/web/src/custom-pages/weekly-newsletters-list-page.tsx b/apps/web/src/custom-pages/weekly-newsletters-list-page.tsx
index 53a4c509..73bad272 100644
--- a/apps/web/src/custom-pages/weekly-newsletters-list-page.tsx
+++ b/apps/web/src/custom-pages/weekly-newsletters-list-page.tsx
@@ -24,7 +24,7 @@ export default async function Page() {
     >
       <div className="relative m-auto flex max-w-full flex-col gap-8 p-4 md:p-6">
         <div className="max-w-4xl space-y-4 md:my-8 md:space-y-8">
-          <h1 className="text-4xl font-bold">{t("title")}</h1>
+          <h1 className="text-4xl font-bold hyphens-auto">{t("title")}</h1>
           {weeklyNewsletters.map((newsletter) => (
             <Link
               className="not-prose my-4 flex w-fit items-center gap-4 rounded-md border-2 border-gray-900 p-4 shadow-solid hover:border-gray-800 hover:bg-gray-300/90"