+
{profile?.name || shortenedNpub}
{#if profile?.nip05 && profile.nip05.length > 0}
-
+
{profile.nip05[0]}
{/if}
@@ -210,10 +210,30 @@
.profile-badge {
text-decoration: none;
color: inherit;
- max-width: 100%;
- width: 100%;
+ max-width: 100% !important;
+ width: auto !important;
+ min-width: 0 !important;
transition: opacity 0.2s;
- overflow: hidden;
+ overflow: visible !important;
+ word-break: break-word !important;
+ overflow-wrap: anywhere !important;
+ box-sizing: border-box !important;
+ display: inline-flex !important;
+ flex-shrink: 1 !important;
+ }
+
+ .profile-badge-content {
+ min-width: 0 !important;
+ max-width: 100% !important;
+ width: 100% !important;
+ box-sizing: border-box !important;
+ }
+
+ .nip05-container {
+ width: 100% !important;
+ max-width: 100% !important;
+ box-sizing: border-box !important;
+ min-width: 0 !important;
}
.profile-badge:hover {
@@ -263,23 +283,86 @@
min-height: 1.5rem;
}
+ /* Apply break-all only on wider screens (not in narrow screen media query) */
+ @media (min-width: 641px) {
+ .nip05-text {
+ font-size: 0.875em;
+ word-break: break-all !important;
+ overflow-wrap: anywhere !important;
+ word-wrap: break-word !important;
+ max-width: 100% !important;
+ white-space: normal !important;
+ flex-shrink: 1 !important;
+ min-width: 0 !important;
+ display: inline-block !important;
+ width: auto !important;
+ max-width: 100% !important;
+ box-sizing: border-box !important;
+ hyphens: auto;
+ overflow: visible !important;
+ }
+
+ .break-nip05 {
+ word-break: break-all !important;
+ overflow-wrap: anywhere !important;
+ word-wrap: break-word !important;
+ white-space: normal !important;
+ max-width: 100% !important;
+ display: inline-block !important;
+ }
+ }
+
+ /* Base styles for NIP-05 text that apply on all screen sizes */
.nip05-text {
font-size: 0.875em;
- word-break: break-word;
- overflow-wrap: break-word;
- max-width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
+ max-width: 100% !important;
+ flex-shrink: 1 !important;
+ min-width: 0 !important;
+ display: inline-block !important;
+ width: auto !important;
+ box-sizing: border-box !important;
+ hyphens: auto;
+ }
+
+ .break-nip05 {
+ max-width: 100% !important;
+ display: inline-block !important;
}
@media (max-width: 640px) {
.profile-badge {
- max-width: 100%;
+ max-width: 100% !important;
+ width: 100% !important;
}
- .nip05-text {
- max-width: 100%;
- word-break: break-all;
+ .nip05-container {
+ flex-direction: column !important;
+ align-items: flex-start !important;
+ width: 100% !important;
+ }
+
+ /* Truncate handle/name to 10 characters on narrow screens */
+ .profile-badge-content .truncate {
+ max-width: 10ch !important;
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+ display: inline-block !important;
+ }
+
+ /* Truncate NIP-05 to 10 characters on narrow screens */
+ /* Override both the class selectors and Tailwind's break-all utility */
+ .nip05-text,
+ .break-nip05 {
+ max-width: 10ch !important;
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+ display: inline-block !important;
+ word-break: normal !important;
+ overflow-wrap: normal !important;
+ word-wrap: normal !important;
+ box-sizing: border-box !important;
}
}
diff --git a/src/lib/modules/feed/FeedPost.svelte b/src/lib/modules/feed/FeedPost.svelte
index e8481bc..ebe13ed 100644
--- a/src/lib/modules/feed/FeedPost.svelte
+++ b/src/lib/modules/feed/FeedPost.svelte
@@ -840,12 +840,12 @@
{:else}
diff --git a/src/routes/topics/[name]/+page.svelte b/src/routes/topics/[name]/+page.svelte
index e462689..41e8df8 100644
--- a/src/routes/topics/[name]/+page.svelte
+++ b/src/routes/topics/[name]/+page.svelte
@@ -155,7 +155,7 @@
-
+