fix(ui): gracefully handle lengthy titles & long words in overviews (#…

…1338)
sct · Mar 31, 2021 · d8bcb99 · d8bcb99
1 parent 55b18f0
commit d8bcb99
Showing 1 changed file with 11 additions and 1 deletion.
diff --git 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}