From 2bedc268858ad6783219c36deb846f2cad2afdcc Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Mon, 10 Jul 2023 19:02:31 -0400
Subject: [PATCH] style: don't truncate URL's

---
 .../client/src/components/MkUrlPreview.vue    |  2 +-
 .../client/src/components/global/MkUrl.vue    | 14 ++++---
 packages/client/src/style.scss                | 37 ++++++++++---------
 3 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 73938cf86..29d045ebf 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -255,7 +255,7 @@ onUnmounted(() => {
 			margin-bottom: 0.2em;
 			text-decoration: underline;
 			text-decoration-color: transparent;
-			transition: text-decoration-color .2s;
+			transition: text-decoration-color 0.2s;
 		}
 		p {
 			margin-bottom: -0.5em;
diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue
index 3453bf5ed..6e50c851e 100644
--- a/packages/client/src/components/global/MkUrl.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -75,13 +75,11 @@ const target = self ? null : "_blank";
 
 <style lang="scss" scoped>
 .url {
-	white-space: nowrap;
-	max-width: 80%;
-	display: inline-block;
-	overflow: clip;
-	text-overflow: ellipsis;
 	text-decoration: none !important;
-	line-height: 1.05;
+	> span {
+		text-decoration: underline var(--fgTransparent);
+		transition: text-decoration-color 0.2s;
+	}
 
 	> .icon {
 		padding-left: 2px;
@@ -111,5 +109,9 @@ const target = self ? null : "_blank";
 	> .hash {
 		font-style: italic;
 	}
+
+	&:hover span {
+		text-decoration-color: var(--link);
+	}
 }
 </style>
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 7f3713881..a53f47f14 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -147,7 +147,7 @@ a {
 	-webkit-tap-highlight-color: transparent;
 	text-decoration: underline;
 	text-decoration-color: transparent;
-	transition: text-decoration-color .2s;
+	transition: text-decoration-color 0.2s;
 	&:hover {
 		text-decoration-color: currentColor;
 	}
@@ -635,24 +635,25 @@ hr {
 ._link {
 	position: relative;
 	color: var(--link);
-	text-decoration: none !important;
 
-	&::before, &::after {
-		content: "";
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 0%;
-		border-bottom: 1px solid currentColor;
-		transition: 0.3s ease-in-out;
-	}
-	&::before {
-		width: 100%;
-		opacity: .4;
-	}
-	&:hover:after, &:focus:after {
-		width: 100%;
-	}
+	// &::before,
+	// &::after {
+	// 	content: "";
+	// 	position: absolute;
+	// 	bottom: 0;
+	// 	left: 0;
+	// 	width: 0%;
+	// 	border-bottom: 1px solid currentColor;
+	// 	transition: 0.3s ease-in-out;
+	// }
+	// &::before {
+	// 	width: 100%;
+	// 	opacity: 0.4;
+	// }
+	// &:hover:after,
+	// &:focus:after {
+	// 	width: 100%;
+	// }
 }
 
 ._caption {