From e4aa81ff30ff5ebc767fe6c9ed847bb4a0140db2 Mon Sep 17 00:00:00 2001
From: clombion <8268300+clombion@users.noreply.github.com>
Date: Sun, 19 Jul 2026 13:46:55 +0200
Subject: [PATCH] fix: wrap long dataset titles to prevent horizontal overflow

A dataset title with a long unbroken token (e.g. a filename-style slug)
had no break opportunity, so it stretched its container past the viewport
width. On the dataset page the title ran off-screen; on the mobile home
page it widened a card in the latest-datasets grid, pushing the whole
document wider than the viewport so the hero no longer spanned the screen.

Wrap titles and let their grid/flex tracks shrink:
- HeroSection h1, MainSection card title, DatasetItem title, and the
  ResourcesList resource name get break-words.
- The home latest-datasets grid is single-column on mobile (grid-cols-1)
  with min-w-0 cards, and the search results column gets min-w-0, so a
  long token can no longer force a track wider than the viewport.
---
 components/_shared/HeroSection.tsx                  | 2 +-
 components/dataset/individualPage/ResourcesList.tsx | 2 +-
 components/dataset/search/DatasetItem.tsx           | 2 +-
 components/home/mainSection/MainSection.tsx         | 8 ++++----
 pages/search.tsx                                    | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/_shared/HeroSection.tsx b/components/_shared/HeroSection.tsx
index b193449..bf7408c 100644
--- a/components/_shared/HeroSection.tsx
+++ b/components/_shared/HeroSection.tsx
@@ -20,7 +20,7 @@ export default function HeroSection({
             {eyebrow}
           </span>
         )}
-        <h1 className="mt-2 text-3xl md:text-[44px] font-extrabold leading-[1.12] tracking-tight text-accent capitalize">
+        <h1 className="mt-2 text-3xl md:text-[44px] font-extrabold leading-[1.12] tracking-tight text-accent capitalize break-words">
           {title}{" "}
           {titleAccent && <span className="text-eiti-navy2">{titleAccent}</span>}
         </h1>
diff --git a/components/dataset/individualPage/ResourcesList.tsx b/components/dataset/individualPage/ResourcesList.tsx
index 87a0529..83990ea 100644
--- a/components/dataset/individualPage/ResourcesList.tsx
+++ b/components/dataset/individualPage/ResourcesList.tsx
@@ -21,7 +21,7 @@ export default function ResourcesList({
           className="flex w-full flex-col gap-4 rounded-lg border border-eiti-border bg-white px-5 py-4 md:flex-row md:items-center md:justify-between"
         >
           <div className="min-w-0 grow">
-            <h4 className="text-[15px] font-bold leading-snug text-accent line-clamp-3">
+            <h4 className="text-[15px] font-bold leading-snug text-accent line-clamp-3 break-words">
               {resource.name || "No title"}
             </h4>
             {resource.description ? (
diff --git a/components/dataset/search/DatasetItem.tsx b/components/dataset/search/DatasetItem.tsx
index 3edc2ac..4c07ba9 100644
--- a/components/dataset/search/DatasetItem.tsx
+++ b/components/dataset/search/DatasetItem.tsx
@@ -15,7 +15,7 @@ export default function DatasetItem({
       href={`/@${dataset.organization.name}/${dataset.name}`}
       className="group block rounded-lg border border-eiti-border bg-white p-5 transition-all hover:border-eiti-borderinput hover:shadow-sm"
     >
-      <div className="text-[17px] font-extrabold leading-snug text-accent">
+      <div className="text-[17px] font-extrabold leading-snug text-accent break-words">
         <span className="border-b-2 border-transparent group-hover:border-eiti-amber">
           {dataset.title}
         </span>
diff --git a/components/home/mainSection/MainSection.tsx b/components/home/mainSection/MainSection.tsx
index af99e2e..9311319 100644
--- a/components/home/mainSection/MainSection.tsx
+++ b/components/home/mainSection/MainSection.tsx
@@ -124,7 +124,7 @@ export default function MainSection({
             allHref="/search"
             allLabel="All datasets"
           />
-          <div className="grid gap-4 md:grid-cols-3">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
             {datasets
               .filter((dataset) => dataset.organization?.name)
               .slice(0, 3)
@@ -132,15 +132,15 @@ export default function MainSection({
               <Link
                 key={dataset.id}
                 href={`/@${dataset.organization?.name}/${dataset.name}`}
-                className="flex min-h-[128px] flex-col justify-between rounded-lg border border-eiti-border border-l-2 border-l-eiti-amber bg-white px-5 py-4 transition-all hover:border-eiti-borderinput hover:shadow-sm"
+                className="flex min-h-[128px] min-w-0 flex-col justify-between rounded-lg border border-eiti-border border-l-2 border-l-eiti-amber bg-white px-5 py-4 transition-all hover:border-eiti-borderinput hover:shadow-sm"
               >
-                <div>
+                <div className="min-w-0">
                   {dataset.metadata_modified && (
                     <div className="mb-1 text-[10px] font-bold uppercase tracking-label text-eiti-amberink">
                       Updated {getTimeAgo(dataset.metadata_modified)}
                     </div>
                   )}
-                  <div className="text-base font-extrabold leading-snug text-accent">
+                  <div className="text-base font-extrabold leading-snug text-accent break-words">
                     {dataset.title || dataset.name}
                   </div>
                 </div>
diff --git a/pages/search.tsx b/pages/search.tsx
index ea475c7..d4343d4 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -75,7 +75,7 @@ function SearchPageContent() {
           <div className="lg:col-span-3 lg:sticky top-3 h-fit">
             <DatasetSearchFilters />
           </div>
-          <div className="lg:col-span-6">
+          <div className="lg:col-span-6 min-w-0">
             <ListOfDatasets />
           </div>
         </article>