From d8bcb99b2fd3b24a5119ba5ff213a640425ff553 Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Wed, 31 Mar 2021 06:19:14 -0400
Subject: [PATCH] fix(ui): gracefully handle lengthy titles & long words in
 overviews (#1338)

---
 src/components/TitleCard/index.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index 9d34c87da..d009d6fe8 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -221,7 +221,16 @@ const TitleCard: React.FC<TitleCardProps> = ({
                     >
                       {year && <div className="text-sm">{year}</div>}
 
-                      <h1 className="text-xl leading-tight whitespace-normal">
+                      <h1
+                        className="text-xl leading-tight whitespace-normal"
+                        style={{
+                          WebkitLineClamp: 3,
+                          display: '-webkit-box',
+                          overflow: 'hidden',
+                          WebkitBoxOrient: 'vertical',
+                          wordBreak: 'break-word',
+                        }}
+                      >
                         {title}
                       </h1>
                       <div
@@ -236,6 +245,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                           display: '-webkit-box',
                           overflow: 'hidden',
                           WebkitBoxOrient: 'vertical',
+                          wordBreak: 'break-word',
                         }}
                       >
                         {summary}