feat: add hyphens-auto to page titles and h1 elements

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">

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>

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">

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>

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>

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} />

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} />

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) => (

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"