From d0951bf7c1729973c5c422d0ab88baefe6b74e87 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Wed, 26 Feb 2025 14:57:17 +0100
Subject: frontend: Show URL in a textual representation in the details sidebar

Instead of hiding the URL behind a button with an icon, make it more
prominent as a full item in the details grid. The user can then interact
with it more directly.
---
 frontend/src/lib/tabs/ComicDetails.svelte | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte
index 887b7a5..89eb053 100644
--- a/frontend/src/lib/tabs/ComicDetails.svelte
+++ b/frontend/src/lib/tabs/ComicDetails.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ComicFilter, FullComicFragment } from '$gql/graphql';
+	import { type ComicFilter, type FullComicFragment } from '$gql/graphql';
 	import { CategoryLabel, CensorshipLabel, LanguageLabel, RatingLabel } from '$lib/Enums';
 	import { href } from '$lib/Navigation';
 	import { formatListSize, joinText } from '$lib/Utils';
@@ -27,18 +27,6 @@
 
 <div class="flex flex-col gap-4 text-sm">
 	<Header {title}>
-		{#if comic.url}
-			<a
-				href={comic.url}
-				target="_blank"
-				rel="noreferrer"
-				class="btn-slate"
-				title="Open URL"
-				aria-label="Open URL"
-			>
-				<span class="icon-base icon-[material-symbols--link]"></span>
-			</a>
-		{/if}
 		<a
 			href={`/archives/${comic.archive.id}`}
 			class="btn-slate"
@@ -85,6 +73,16 @@
 		</Section>
 	</div>
 
+	{#if comic.url}
+		<Section title="URL">
+			<a
+				class="ellipsis-nowrap transition-colors hover:text-white hover:underline"
+				rel="noreferrer"
+				href={comic.url}>{comic.url}</a
+			>
+		</Section>
+	{/if}
+
 	{#if comic.artists.length}
 		<Section title="Artists">
 			{#each comic.artists as { id, name } (id)}
-- 
cgit v1.2.3-2-gb3c3