mobile layout (#254)

Rich-Harris · Rich Harris · web-flow · commit c1e1e58a4251 · 2023-03-14T09:08:43.000-04:00
* partial fix for #12 * use dynamic viewport units --------- Co-authored-by: Rich Harris <git@rich-harris.dev>
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
 		"@lezer/javascript": "^1.4.1",
 		"@lezer/lr": "^1.3.3",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
-		"@rich_harris/svelte-split-pane": "^1.0.0",
+		"@rich_harris/svelte-split-pane": "^1.0.1",
 		"@webcontainer/api": "^1.0.2",
 		"adm-zip": "^0.5.10",
 		"ansi-to-html": "^0.7.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -50,7 +50,7 @@
 	:global(body) {
 		margin: 0;
 		width: 100%;
-		min-height: 100vh;
+		min-height: 100dvh;
 	}
 
 	/* TODO when we remove the launch banner, we can remove this override */
@@ -60,7 +60,7 @@
 
 	main {
 		width: 100%;
-		height: calc(100vh - var(--nav-h));
+		height: calc(100dvh - var(--nav-h));
 		position: relative;
 		top: var(--nav-h);
 	}
diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte
@@ -75,7 +75,9 @@
 			editor_states.set(file.name, state);
 		}
 
-		editor_view.setState(state);
+		if (editor_view) {
+			editor_view.setState(state);
+		}
 	}
 
 	onMount(() => {

Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,9 @@`
`75`	`75`	`editor_states.set(file.name, state);`
`76`	`76`	`}`
`77`	`77`
`78`		`- editor_view.setState(state);`
	`78`	`+ if (editor_view) {`
	`79`	`+ editor_view.setState(state);`
	`80`	`+ }`
`79`	`81`	`}`
`80`	`82`
`81`	`83`	`onMount(() => {`