From 3512140148aa142074d392934871e806b15c4697 Mon Sep 17 00:00:00 2001
From: Thomas <9749173+uhthomas@users.noreply.github.com>
Date: Fri, 16 Jun 2023 23:37:11 +0100
Subject: [PATCH] feat(web): add padding to memory asset navigation (#2822)

The bars are 2 pixels tall, which can be tricky to click. Additional padding
increases the height to 16 pixels, without changing how it looks, and makes for
much easier clicking.

In addition, remove the onDestroy lifecycle for the tween as it's not
necessary. It was a relic from using animation frames.
---
 web/src/lib/components/memory-page/memory-viewer.svelte | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index 187c23812..23876578e 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { memoryStore } from '$lib/stores/memory.store';
 	import { DateTime } from 'luxon';
-	import { onDestroy, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import { api } from '@api';
 	import { goto } from '$app/navigation';
 	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
@@ -72,8 +72,6 @@
 	// Progress should be reset when the current memory or asset changes.
 	$: memoryIndex, assetIndex, reset();
 
-	onDestroy(() => pause());
-
 	onMount(async () => {
 		if (!$memoryStore) {
 			const { data } = await api.assetApi.getMemoryLane({
@@ -107,7 +105,7 @@
 
 					{#each currentMemory.assets as _, i}
 						<button
-							class="relative w-full"
+							class="relative w-full py-2"
 							on:click={() => goto(`?memory=${memoryIndex}&asset=${i}`)}
 						>
 							<span class="absolute left-0 w-full h-[2px] bg-gray-500" />