From 31e2b43cc94a1d17ac661cad51f9fff564ff1267 Mon Sep 17 00:00:00 2001
From: Conrad <conradwcrawford@gmail.com>
Date: Sun, 20 Jun 2021 12:34:33 -0400
Subject: [PATCH] text wrapping for activity

---
 src/renderCard.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/renderCard.tsx b/src/renderCard.tsx
index f0bfd20..e9ba6b9 100644
--- a/src/renderCard.tsx
+++ b/src/renderCard.tsx
@@ -222,12 +222,29 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                 </div>
                                 <div style="
                                     color: #999;
-                                    line-height: 0.5rem;
+                                    margin-top: -3px;
+                                    line-height: 1;
+                                    width: 279px;
                                 ">
-                                    <p style="font-size: 0.7rem; color: #7289DA; margin-bottom: 20px;">PLAYING A GAME...</p> 
-                                    <p style="color: ${theme === 'dark' ? '#fff' : '#000'}; font-weight: bold;">${activity.name}</p>
+                                    <p style="font-size: 0.7rem; color: #7289DA; margin-bottom: 15px;">PLAYING A GAME...</p> 
+                                    <p style="
+                                        color: ${theme === 'dark' ? '#fff' : '#000'}; \
+                                        font-weight: bold;
+                                        overflow: hidden;
+                                        white-space: nowrap;
+                                        text-overflow: ellipsis;
+                                        height: 15px;
+                                        margin: 7px 0;
+                                    ">${activity.name}</p>
                                     ${activity.details ? 
-                                        `<p style="color: ${theme === 'dark' ? '#ccc' : '#777'}">${activity.details}</p>`
+                                        `<p style="
+                                            color: ${theme === 'dark' ? '#ccc' : '#777'};
+                                            overflow: hidden;
+                                            white-space: nowrap;
+                                            text-overflow: ellipsis;
+                                            height: 15px;
+                                            margin: 7px 0;
+                                        ">${activity.details}</p>`
                                     : ``}
                                    
                                 </div>