From 83b152c7b51fa9aa3acf489bd8a7aff6255ce4f9 Mon Sep 17 00:00:00 2001
From: mat <git@matdoes.dev>
Date: Mon, 30 Sep 2024 02:52:48 +0000
Subject: [PATCH] fix x overflow on page transition

---
 src/app.css                      | 5 +++++
 src/routes/(main)/+layout.svelte | 6 ++++--
 src/routes/(main)/+page.svelte   | 2 ++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index c0c29c2..49ef110 100644
--- a/src/app.css
+++ b/src/app.css
@@ -121,3 +121,8 @@ body.extra-dark-theme {
 	background-color: #000;
 	filter: brightness(0.1);
 }
+
+body.sandcat-mode {
+	--background-color: transparent;
+	--background-color-alt: #0006;
+}
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
index 522245b..6447c10 100644
--- a/src/routes/(main)/+layout.svelte
+++ b/src/routes/(main)/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import '../../app.css'
 	import { fly } from 'svelte/transition'
-	import type { LayoutData } from '../$types'
+	import type { LayoutData } from './$types'
 	import { browser } from '$app/environment'
 	import { writable } from 'svelte/store'
 	import { onMount } from 'svelte'
@@ -130,10 +130,12 @@
 		flex-direction: column;
 		justify-content: space-between;
 		align-items: stretch;
-		overflow-x: hidden;
 		overflow-wrap: break-word;
 		position: relative;
 	}
+	:global(body) {
+		overflow-x: hidden;
+	}
 
 	main {
 		padding: 1em;
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
index ebd24e0..48ae7a0 100644
--- a/src/routes/(main)/+page.svelte
+++ b/src/routes/(main)/+page.svelte
@@ -105,6 +105,8 @@
 		sandcatContainerEl.style.lineHeight = '0'
 		document.body.appendChild(sandcatContainerEl)
 
+		document.body.classList.add('sandcat-mode')
+
 		let mustWait = true
 
 		;(async () => {