From 81af48af7b635b9cf112da1ad81c8b9cbd079501 Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Tue, 19 Dec 2023 18:01:22 +0100
Subject: [PATCH] fix(web): open image in new tab with memories on firefox
 (#5847)

* fix: open image in new tab with memories on firefox

* don't use z-index

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
---
 .../memory-page/memory-viewer.svelte          | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index 8f58b662b7..f96b2ba5ba 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -179,25 +179,7 @@
         <div
           class="main-view relative flex h-full w-[70vw] place-content-center place-items-center rounded-2xl bg-black"
         >
-          <div class="h-full w-full rounded-2xl bg-black">
-            <!-- CONTROL BUTTONS -->
-            <div class="absolute flex h-full w-full justify-between">
-              <div class="ml-4 flex h-full flex-col place-content-center place-items-center">
-                <div class="inline-block">
-                  {#if canGoBack}
-                    <CircleIconButton icon={mdiChevronLeft} backgroundColor="#202123" on:click={toPrevious} />
-                  {/if}
-                </div>
-              </div>
-              <div class="mr-4 flex h-full flex-col place-content-center place-items-center">
-                <div class="inline-block">
-                  {#if canGoForward}
-                    <CircleIconButton icon={mdiChevronRight} backgroundColor="#202123" on:click={toNext} />
-                  {/if}
-                </div>
-              </div>
-            </div>
-
+          <div class="relative h-full w-full rounded-2xl bg-black">
             {#key currentAsset.id}
               <img
                 transition:fade
@@ -207,6 +189,18 @@
                 draggable="false"
               />
             {/key}
+            <!-- CONTROL BUTTONS -->
+            {#if canGoBack}
+              <div class="absolute top-1/2 left-0 ml-4">
+                <CircleIconButton icon={mdiChevronLeft} backgroundColor="#202123" on:click={toPrevious} />
+              </div>
+            {/if}
+
+            {#if canGoForward}
+              <div class="absolute top-1/2 right-0 mr-4">
+                <CircleIconButton icon={mdiChevronRight} backgroundColor="#202123" on:click={toNext} />
+              </div>
+            {/if}
 
             <div class="absolute left-8 top-4 text-sm font-medium text-white">
               <p>