From 546acc8d9a897af95bc2251daa5c697e6b1c5e27 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Thu, 19 Jan 2023 15:37:47 +0000
Subject: [PATCH] bug: break external links

---
 src/element/Note.css |  2 ++
 src/element/Text.tsx | 21 ++++-----------------
 src/index.css        |  5 +++++
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/element/Note.css b/src/element/Note.css
index c77ff9c2..5cd7b83e 100644
--- a/src/element/Note.css
+++ b/src/element/Note.css
@@ -35,6 +35,8 @@
     text-overflow: ellipsis;
     white-space: pre-wrap;
     word-break: normal;
+    overflow-x: hidden;
+    overflow-y: visible;
 }
 
 .note > .header img:hover, .note > .header .name > .reply:hover, .note .body:hover {
diff --git a/src/element/Text.tsx b/src/element/Text.tsx
index 3019f4d1..9aeddeca 100644
--- a/src/element/Text.tsx
+++ b/src/element/Text.tsx
@@ -37,11 +37,7 @@ function transformHttpLink(a: string) {
                     return <video key={url.toString()} src={url.toString()} controls />
                 }
                 default:
-                    return (
-                      <div className="truncate">
-                        <a key={url.toString()} href={url.toString()} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
-                      </div>
-                    )
+                    return <a key={url.toString()} href={url.toString()} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{url.toString()}</a>
             }
         } else if (tweetId) {
             return (
@@ -66,19 +62,11 @@ function transformHttpLink(a: string) {
                 </>
             )
         } else {
-            return (
-              <div className="truncate">
-                <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
-              </div>
-            )
+            return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
         }
     } catch (error) {
     }
-    return (
-      <div className="truncate">
-        <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
-      </div>
-    )
+    return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
 }
 
 function extractLinks(fragments: Fragment[]) {
@@ -168,8 +156,7 @@ function transformParagraph({ body, tags, users }: TextFragment) {
 }
 
 function transformText({ body, tags, users }: TextFragment) {
-    if(body === undefined)
-    {
+    if (body === undefined) {
         debugger;
     }
     let fragments = extractMentions(body, tags, users);
diff --git a/src/index.css b/src/index.css
index b9406911..126203d1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -204,6 +204,11 @@ a {
   line-height: 1.3em;
 }
 
+a.ext {
+  word-break: break-all;
+  white-space: initial;
+}
+
 div.form-group {
   display: flex;
   align-items: center;