From f2be310aec40509a337c6f0b60a1d9bb502f7a12 Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Tue, 14 May 2024 04:52:39 -0500
Subject: [PATCH] fix(web): decrease asset viewer navigation area size (#9455)

* fix(web): decrease asset viewer navigation area size

* Remove unneeded class

* Reduce wrapping div area
---
 web/src/lib/components/asset-viewer/asset-viewer.svelte    | 4 ++--
 web/src/lib/components/asset-viewer/navigation-area.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 94c75f7177e..1b6d9479a9e 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -600,7 +600,7 @@
     {/if}
 
     {#if $slideshowState === SlideshowState.None && showNavigation}
-      <div class="z-[1001] column-span-1 col-start-1 row-span-1 row-start-2 justify-self-start">
+      <div class="z-[1001] my-auto column-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
         <NavigationArea onClick={(e) => navigateAsset('previous', e)} label="View previous asset">
           <Icon path={mdiChevronLeft} size="36" ariaHidden />
         </NavigationArea>
@@ -691,7 +691,7 @@
     </div>
 
     {#if $slideshowState === SlideshowState.None && showNavigation}
-      <div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 justify-self-end">
+      <div class="z-[1001] my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end">
         <NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset">
           <Icon path={mdiChevronRight} size="36" ariaHidden />
         </NavigationArea>
diff --git a/web/src/lib/components/asset-viewer/navigation-area.svelte b/web/src/lib/components/asset-viewer/navigation-area.svelte
index efa2761cb11..801d2036431 100644
--- a/web/src/lib/components/asset-viewer/navigation-area.svelte
+++ b/web/src/lib/components/asset-viewer/navigation-area.svelte
@@ -5,7 +5,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="group flex h-full place-items-center hover:cursor-pointer" on:click={onClick}>
+<div class="my-auto group hover:cursor-pointer" on:click={onClick}>
   <button
     class="mx-4 rounded-full p-3 text-gray-500 transition group-hover:bg-gray-500 group-hover:text-white"
     aria-label={label}