Truncate too long links in the profile, like Nostr

ronilaukkarinen · Nov 12, 2023 · c166e59 · c166e59
1 parent 82c5103
commit c166e59
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@
 * Better accessibility outlines for column links in single column mode
 * Fix a corner case bug where advanced UI in mobile mode has wrong order in column links
 * Add profile link icons for Nostr, Bluesky and Threads
+* Truncate too long links in the profile, like Nostr
 
 ### 1.8.0: 2023-10-29
 

diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css
@@ -2231,6 +2231,15 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
   padding: 0;
 }
 
+/* Truncate too long links in the profile, like Nostr */
+.layout-multiple-columns .account__header__bio .account__header__fields a span {
+  display: block;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .layout-multiple-columns .account__header__bio .account__header__fields dl::after {
   content: '|';
   order: 2;

diff --git a/layout-single-column.css b/layout-single-column.css
@@ -2272,6 +2272,15 @@ body.embed .detailed-status__meta .detailed-status__link .icon-retweet,
   padding: 0;
 }
 
+/* Truncate too long links in the profile, like Nostr */
+.layout-single-column .account__header__bio .account__header__fields a span {
+  display: block;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .layout-single-column .account__header__bio .account__header__fields dl::after {
   content: '|';
   order: 2;