Fix PWA toast

PurelyAnecdotal · Feb 19, 2024 · 4d45ba3 · 4d45ba3
1 parent 5a72bb0
commit 4d45ba3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/src/lib/ReloadPrompt.svelte b/src/lib/ReloadPrompt.svelte
@@ -18,23 +18,24 @@
 </script>
 
 {#if $offlineReady || $needRefresh}
-	<Toast
-		color="green"
-		position="bottom-right"
-		contentClass="w-full text-sm font-normal flex items-center justify-between"
-	>
-		<DownloadOutline slot="icon" class="focus:outline-none" />
+	<div class="fixed bottom-4 right-4">
+		<Toast
+			color="green"
+			contentClass="w-full text-sm font-normal flex items-center justify-between"
+		>
+			<DownloadOutline slot="icon" class="focus:outline-none" />
 
-		<span class="text-gray-300">
-			{#if $offlineReady}
-				App ready to work offline
-			{:else if $needRefresh}
-				Update available
-			{/if}
-		</span>
+			<span class="text-gray-300">
+				{#if $offlineReady}
+					App ready to work offline
+				{:else if $needRefresh}
+					Update available
+				{/if}
+			</span>
 
-		{#if $needRefresh}
-			<Button on:click={reload} size="xs">Reload</Button>
-		{/if}
-	</Toast>
+			{#if $needRefresh}
+				<Button on:click={reload} size="xs">Reload</Button>
+			{/if}
+		</Toast>
+	</div>
 {/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -3,12 +3,12 @@
 	import '../app.css';
 </script>
 
-{#await import('$lib/ReloadPrompt.svelte') then { default: ReloadPrompt }}
-	<div class="fixed w-full h-full"><ReloadPrompt /></div>
-{/await}
-
 <svelte:head>
 	{@html pwaInfo?.webManifest.linkTag ?? ''}
 </svelte:head>
 
 <slot />
+
+{#await import('$lib/ReloadPrompt.svelte') then { default: ReloadPrompt }}
+	<ReloadPrompt />
+{/await}