Fix Profile URL truncation on Firefox

Automattic · Jan 7, 2025 · 0f1fd79 · 0f1fd79
1 parent 147d616
commit 0f1fd79
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/web/packages/hovercards/src/core.ts b/web/packages/hovercards/src/core.ts
@@ -366,10 +366,11 @@ export default class Hovercards {
 					</a>
 				</div>
 				${
-					description &&
-					`<div class="gravatar-hovercard__body">
-						<p class="gravatar-hovercard__description">${ escHtml( description ) }</p>
-					</div>`
+					description
+						? `<div class="gravatar-hovercard__body">
+								<p class="gravatar-hovercard__description">${ escHtml( description ) }</p>
+							</div>`
+						: ''
 				}
 				<div class="gravatar-hovercard__social-links">
 					<a class="gravatar-hovercard__social-link" href="${ trackedProfileUrl }" target="_blank" data-service-name="gravatar">

diff --git a/web/packages/hovercards/src/style.scss b/web/packages/hovercards/src/style.scss
@@ -151,9 +151,11 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
 	}
 
 	.gravatar-hovercard__profile-url {
-
-		@include ellipsis(1);
-
+		// webkit-box used by ellipsis mixin
+		// doesn't work well for URLs on Firefox
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 		color: $color-gray;
 	}