bug: break external links

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 {

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);

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;