make image previews bigger

src/lib/components/FramePreview.svelte

@@ -11,7 +11,7 @@
 	import { frames, mode } from '../store';
 
 	import { ProgressRadial } from '@skeletonlabs/skeleton';
-	import { debug, info } from '$lib/logging';
+	import { info } from '$lib/logging';
 	import { loadGif, loadImage } from '$lib/io';
 	import { keepFocused } from '$lib/state';
 	export let index: number;
@@ -116,7 +116,7 @@
 {/if}
 
 <button
-	class="btn btn-xl w-24 md:w-32 variant-ghost-primary aspect-square cursor-pointer z-50"
+	class="btn btn-xl p-4 w-24 md:w-32 variant-ghost-primary aspect-square cursor-pointer z-50"
 	on:click={(e) => {
 		if (e.shiftKey) {
 			clearImage();
@@ -128,64 +128,6 @@
 	{#if loading}
 		<ProgressRadial />
 	{:else if src}
-		<img {src} alt="Frame {{ index }}" />
+		<img {src} alt="Frame {{ index }}" class="w-full" />
 	{/if}
 </button>
-
-<style lang="scss">
-	@-webkit-keyframes rotating {
-		from {
-			-webkit-transform: rotate(0deg);
-			-o-transform: rotate(0deg);
-			transform: rotate(0deg);
-		}
-		to {
-			-webkit-transform: rotate(360deg);
-			-o-transform: rotate(360deg);
-			transform: rotate(360deg);
-		}
-	}
-	@keyframes rotating {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	$bg: rgba(150, 150, 150, 0.5);
-	.preview {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 10px;
-		border: 2px solid black;
-		width: 100%;
-		height: 100%;
-		background-color: $bg;
-		user-select: none;
-		cursor: pointer;
-	}
-
-	.box {
-		width: 15vh;
-		height: 15vh;
-		user-select: none;
-		gap: 10px;
-		display: flex;
-		align-content: center;
-		justify-content: center;
-		.context {
-			z-index: 900;
-			position: absolute;
-			left: 105%;
-			width: max-content;
-		}
-	}
-
-	img {
-		width: 75%;
-		user-select: none;
-	}
-</style>

src/lib/components/tube.svelte

@@ -116,6 +116,8 @@
 
 		updateCanvasSize();
 
+		window?.addEventListener('resize', updateCanvasSize);
+
 		const ctx = canvas.getContext('2d');
 
 		const update = async () => {
@@ -131,7 +133,7 @@
 				} else if (src?.mode === 'gif' && !src.data.running()) {
 					src.data.start();
 				}
-			} catch(e) {
+			} catch (e) {
 				debug('Rendering error', e);
 			}
 			requestAnimationFrame(update);
@@ -149,7 +151,7 @@
 	let canvas: HTMLCanvasElement;
 </script>
 
-<canvas bind:this={canvas} id="png"  />
+<canvas bind:this={canvas} id="png" />
 
 <style lang="scss">
 	canvas {

svelte.config.js

@@ -13,10 +13,13 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter(),
+		adapter: adapter({
+			fallback: 'index.html'
+		}),
 		env: {
 			publicPrefix: 'TAURI_'
-		}
+		},
+		
 	}
 };
 export default config;