From 2c17fef178a3e08c548970d8b2e495f2b3bfb97a Mon Sep 17 00:00:00 2001
From: 0xIchigo <0xIchigo@protonmail.com>
Date: Fri, 8 Dec 2023 00:59:12 -0500
Subject: [PATCH] Fix View Media Button

---
 src/lib/components/log-messages.svelte |  4 +-
 src/routes/token/[token]/+page.svelte  | 59 +++++++++++++-------------
 2 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/log-messages.svelte b/src/lib/components/log-messages.svelte
index 6ed32e25..c4e03973 100644
--- a/src/lib/components/log-messages.svelte
+++ b/src/lib/components/log-messages.svelte
@@ -20,7 +20,9 @@
     );
 
     // Check if there is at least one entry with non-empty logs
-    const hasNonEmptyLogs = parsedLogs.some(instruction => instruction.logs.length > 0);
+    const hasNonEmptyLogs = parsedLogs.some(
+        (instruction) => instruction.logs.length > 0
+    );
 </script>
 
 <div class="pt-0">
diff --git a/src/routes/token/[token]/+page.svelte b/src/routes/token/[token]/+page.svelte
index 2f13c70d..8dba8d2b 100644
--- a/src/routes/token/[token]/+page.svelte
+++ b/src/routes/token/[token]/+page.svelte
@@ -97,7 +97,16 @@
                 </div>
 
                 <div>
-                    <div class="my-2">
+                    <div class="flex items-center space-x-2">
+                        {#if metadata.image}
+                            <a
+                                href={metadata.image}
+                                target="_blank"
+                                class="btn-sm btn border-0 bg-black"
+                            >
+                                View Media
+                            </a>
+                        {/if}
                         <CopyButton text={$page.params.search} />
                         <CopyButton
                             text={$page.url.href}
@@ -115,37 +124,27 @@
             >
                 {#if mediaType === "video"}
                     <!-- Video tag -->
-                    <video
-                        class="m-auto my-3 h-auto w-full rounded-md object-contain"
-                        controls
-                        autoplay
-                        loop
-                        muted
-                        in:fade={{ delay: 600, duration: 1000 }}
-                        src={mediaUrl}
-                    />
-                    <a
-                        href={metadata.image}
-                        target="_blank"
-                        class="btn-sm btn absolute bottom-1 right-1 border-0 bg-black"
-                    >
-                        View Media
-                    </a>
+                    <div class="relative">
+                        <video
+                            class="m-auto my-3 h-auto w-full rounded-md object-contain"
+                            controls
+                            autoplay
+                            loop
+                            muted
+                            in:fade={{ delay: 600, duration: 1000 }}
+                            src={mediaUrl}
+                        />
+                    </div>
                 {:else if mediaType === "image"}
                     <!-- Image tag -->
-                    <img
-                        class="img m-auto my-3 h-auto w-full rounded-md object-contain"
-                        alt="token symbol"
-                        src={mediaUrl}
-                        in:fade={{ delay: 600, duration: 1000 }}
-                    />
-                    <a
-                        href={metadata.image}
-                        target="_blank"
-                        class="btn-sm btn absolute bottom-1 right-1 border-0 bg-black"
-                    >
-                        View Media
-                    </a>
+                    <div class="relative">
+                        <img
+                            class="img m-auto my-3 h-auto w-full rounded-md object-contain"
+                            alt="token symbol"
+                            src={mediaUrl}
+                            in:fade={{ delay: 600, duration: 1000 }}
+                        />
+                    </div>
                 {:else}
                     <!--Loading-->
                     <div>Loading...</div>