From 6ea0e468402bcfb73c0380bb985d57d62927f5a3 Mon Sep 17 00:00:00 2001
From: mihaisc <mihai@oceanprotocol.com>
Date: Thu, 28 Jul 2022 08:34:34 -0700
Subject: [PATCH] Fix long title (#1606)

* slice title in teaser

* title tweaks

* remove dotdotdot
---
 src/components/@shared/AssetTeaser/AssetTeaser.tsx | 3 +--
 src/components/@shared/Page/PageHeader.module.css  | 5 +++++
 src/components/@shared/Page/index.tsx              | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/@shared/AssetTeaser/AssetTeaser.tsx b/src/components/@shared/AssetTeaser/AssetTeaser.tsx
index c62ba43c1..d6b2eb054 100644
--- a/src/components/@shared/AssetTeaser/AssetTeaser.tsx
+++ b/src/components/@shared/AssetTeaser/AssetTeaser.tsx
@@ -25,7 +25,6 @@ export default function AssetTeaser({
   const accessType = isCompute ? 'compute' : 'access'
   const { owner } = asset.nft
   const { orders } = asset.stats
-
   return (
     <article className={`${styles.teaser} ${styles[type]}`}>
       <Link href={`/asset/${asset.id}`}>
@@ -33,7 +32,7 @@ export default function AssetTeaser({
           <header className={styles.header}>
             <div className={styles.symbol}>{datatokens[0]?.symbol}</div>
             <Dotdotdot tagName="h1" clamp={3} className={styles.title}>
-              {name}
+              {name.slice(0, 200)}
             </Dotdotdot>
             {!noPublisher && (
               <Publisher account={owner} minimal className={styles.publisher} />
diff --git a/src/components/@shared/Page/PageHeader.module.css b/src/components/@shared/Page/PageHeader.module.css
index 54fdb1e53..89962be9b 100644
--- a/src/components/@shared/Page/PageHeader.module.css
+++ b/src/components/@shared/Page/PageHeader.module.css
@@ -8,6 +8,11 @@
   margin-top: 0;
   margin-bottom: 0;
   display: inline-flex;
+
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
 }
 
 @media (min-width: 40rem) {
diff --git a/src/components/@shared/Page/index.tsx b/src/components/@shared/Page/index.tsx
index 097894cc6..b21d0e85a 100644
--- a/src/components/@shared/Page/index.tsx
+++ b/src/components/@shared/Page/index.tsx
@@ -26,7 +26,7 @@ export default function Page({
       <Container>
         {title && !noPageHeader && (
           <PageHeader
-            title={<>{title}</>}
+            title={<>{title.slice(0, 400)}</>}
             description={description}
             center={headerCenter}
           />