From 74e11390721cb93eeec1275bf7d6092bbe94352a Mon Sep 17 00:00:00 2001
From: Sophia Willows <20146550+sophiabits@users.noreply.github.com>
Date: Sun, 20 Feb 2022 14:32:54 +1300
Subject: [PATCH] Truncate website title on website list & website details
 pages

---
 components/metrics/WebsiteHeader.js         | 15 ++++++++++-----
 components/metrics/WebsiteHeader.module.css |  8 ++++++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js
index db68cd54..a4fb7df0 100644
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
+import OverflowText from 'components/common/OverflowText';
 import PageHeader from 'components/layout/PageHeader';
 import RefreshButton from 'components/common/RefreshButton';
 import ButtonLayout from 'components/layout/ButtonLayout';
@@ -13,15 +14,19 @@ export default function WebsiteHeader({ websiteId, title, domain, showLink = fal
   const header = showLink ? (
     <>
       <Favicon domain={domain} />
-      <Link href="/website/[...id]" as={`/website/${websiteId}/${title}`}>
-        {title}
+      <Link
+        className={styles.titleLink}
+        href="/website/[...id]"
+        as={`/website/${websiteId}/${title}`}
+      >
+        <OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
       </Link>
     </>
   ) : (
-    <div>
+    <>
       <Favicon domain={domain} />
-      {title}
-    </div>
+      <OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
+    </>
   );
 
   return (
diff --git a/components/metrics/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css
index 5b5876c6..4c9670fa 100644
--- a/components/metrics/WebsiteHeader.module.css
+++ b/components/metrics/WebsiteHeader.module.css
@@ -2,6 +2,14 @@
   color: var(--gray900);
   font-size: var(--font-size-large);
   line-height: var(--font-size-large);
+  align-items: center;
+  display: flex;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.titleLink {
+  max-width: 100%;
 }
 
 .link {