Site: REPL temp fix for the output pane does not receiving touch events on mobile & tablet

Applying this fix to make the site accessible on mobile again,
will remove when https://github.com/sveltejs/svelte-repl/issues/8 gets fixed and published

Fixes #2499 #2550

site/src/routes/examples/index.svelte

@@ -97,11 +97,9 @@
 </svelte:head>
 
 <div class='examples-container' bind:clientWidth={width}>
-	<div
+	<div class="viewport offset-{offset}">
-		class="viewport offset-{offset}"
-	>
 		<TableOfContents {sections} active_section={active_slug} {isLoading} />
-		<div class="toc" class:loading={isLoading}>
+		<div class="repl-container" class:loading={isLoading}>
 			<Repl
 				bind:this={repl}
 				{svelteUrl}
@@ -136,10 +134,24 @@
 		grid-auto-rows: 100%;
 	}
 
-	.toc.loading {
+	.repl-container.loading {
 		opacity: 0.6;
 	}
 
+	/* temp fix for #2499 and #2550 while waiting for a fix for https://github.com/sveltejs/svelte-repl/issues/8 */
+
+	.repl-container :global(.tab-content),
+	.repl-container :global(.tab-content.visible) {
+		pointer-events: all;
+		opacity: 1;
+	}
+	.repl-container :global(.tab-content) {
+		visibility: hidden;
+	}
+	.repl-container :global(.tab-content.visible) {
+		visibility: visible;
+	}
+
 	.offset-1 { transform: translate(-33.333%, 0); }
 	.offset-2 { transform: translate(-66.666%, 0); }
 

site/src/routes/repl/index.svelte

@@ -155,6 +155,20 @@
 		transform: translate(-50%, 0);
 	}
 
+	/* temp fix for #2499 and #2550 while waiting for a fix for https://github.com/sveltejs/svelte-repl/issues/8 */
+
+	.viewport :global(.tab-content),
+	.viewport :global(.tab-content.visible) {
+		pointer-events: all;
+		opacity: 1;
+	}
+	.viewport :global(.tab-content) {
+		visibility: hidden;
+	}
+	.viewport :global(.tab-content.visible) {
+		visibility: visible;
+	}
+
 	.zen-mode {
 		position: fixed;
 		width: 100%;