fix(repl): runes bottom banner overlapping fixed (#9238)

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>

Author: irshad

pnpm-lock.yaml

@@ -30,7 +30,7 @@
     "@resvg/resvg-js": "^2.4.1",
     "@sveltejs/adapter-vercel": "^3.0.3",
     "@sveltejs/kit": "^1.24.1",
-    "@sveltejs/site-kit": "6.0.0-next.47",
+    "@sveltejs/site-kit": "6.0.0-next.50",
     "@sveltejs/vite-plugin-svelte": "^2.4.6",
     "@types/cookie": "^0.5.2",
     "@types/node": "^20.5.9",

sites/svelte.dev/package.json

@@ -104,8 +104,8 @@
 <style>
 	.repl-outer {
 		position: relative;
-		height: calc(100% - var(--sk-nav-height));
-		height: calc(100dvh - var(--sk-nav-height));
+		height: calc(100% - var(--sk-nav-height) - var(--sk-banner-bottom-height));
+		height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
 		--app-controls-h: 5.6rem;
 		--pane-controls-h: 4.2rem;
 		overflow: hidden;

sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte

@@ -34,7 +34,7 @@
 	.posts {
 		grid-template-columns: 1fr 1fr;
 		grid-gap: 1em;
-		min-height: calc(100vh - var(--sk-nav-height));
+		min-height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
 		max-width: var(--sk-page-main-width);
 		margin: 0 auto;

sites/svelte.dev/src/routes/blog/+page.svelte

@@ -70,7 +70,7 @@
 		.toc-container {
 			display: block;
 			width: var(--sidebar-width);
-			height: calc(100vh - var(--sk-nav-height));
+			height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
 			position: fixed;
 			left: 0;
 			top: var(--sk-nav-height);

sites/svelte.dev/src/routes/docs/+layout.svelte

@@ -65,7 +65,7 @@
 <style>
 	.examples-container {
 		position: relative;
-		height: calc(100vh - var(--sk-nav-height));
+		height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
 		overflow: hidden;
 		padding: 0 0 42px 0;
 		box-sizing: border-box;

sites/svelte.dev/src/routes/examples/[slug]/+page.svelte

@@ -161,7 +161,7 @@
 <style>
 	.tutorial-outer {
 		position: relative;
-		height: calc(100vh - var(--sk-nav-height));
+		height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
 		overflow: hidden;
 		padding: 0 0 42px 0;
 		box-sizing: border-box;