REPL looking decent-ish on mobile

site/src/routes/repl/_components/AppControls/UserMenu.html

@@ -22,7 +22,8 @@
 	.user {
 		position: relative;
 		display: inline-block;
-		padding: 0em 3.2rem 0 1.6rem;
+		padding: 0em 1.2rem 0 1.6rem;
+		height: 0.8em;
 		line-height: 1;
 		z-index: 99;
 	}
@@ -40,7 +41,7 @@
 	span {
 		/* position: relative; padding: 0 2em 0 0; */
 		line-height: 1;
-		display: inline-block;
+		display: none;
 		font-family: var(--font-ui);
 		font-size: 1.3rem;
 		opacity: 0.7;
@@ -54,17 +55,18 @@
 		position: absolute;
 		top: -0.05em;
 		right: 0;
-		width: 2.4rem;
+		width: 2.1rem;
-		height: 2.4rem;
+		height: 2.1rem;
 		border: 1px solid rgba(255,255,255,0.3);
 		border-radius: 0.2rem;
 	}
 
 	.menu {
 		position: absolute;
-		width: calc(100% - 0rem);
+		width: calc(100% + 1.6rem);
+		min-width: 6em;
 		top: 3rem;
-		left: 0rem;
+		right: -1.6rem;
 		background-color: var(--second);
 		padding: 0.8rem 1.6rem;
 		z-index: 99;
@@ -82,4 +84,19 @@
 	.menu button:hover {
 		opacity: 1;
 	}
+
+	@media (min-width: 768px) {
+		.user {
+			padding: 0em 3.2rem 0 1.6rem;
+		}
+
+		img {
+			width: 2.4rem;
+			height: 2.4rem;
+		}
+
+		span {
+			display: inline-block;
+		}
+	}
 </style>

site/src/routes/repl/_components/AppControls/index.html

@@ -276,7 +276,7 @@ export default app;` });
 		{:else}
 			<button class="icon" on:click={login}>
 				<Icon name="log-in" />
-				&nbsp;Log in to save
+				<span>&nbsp;Log in to save</span>
 			</button>
 		{/if}
 	</div>
@@ -307,6 +307,8 @@ export default app;` });
 	}
 
 	.icon {
+		position: relative;
+		top: -0.1rem;
 		display: inline-block;
 		padding: 0.2em;
 		opacity: .7;
@@ -338,8 +340,15 @@ export default app;` });
 		opacity: 1;
 	}
 
+	button span {
+		display: none;
+	}
+
 	@media (min-width: 768px) {
 		.icon[title^='fullscreen'] { display: inline }
-	}
 
+		button span {
+			display: inline-block;
+		}
+	}
 </style>

site/src/routes/repl/index.html

@@ -137,31 +137,31 @@
 <style>
 	.repl-outer {
 		position: relative;
-		min-height: calc(100vh - var(--nav-h));
+		height: calc(100vh - var(--nav-h));
+		--app-controls-h: 5.6rem;
 		--pane-controls-h: 4.2rem;
+		overflow: hidden;
+		background-color: var(--back);
+		padding: var(--app-controls-h) 0 0 0;
+		margin: 0 -0.8rem;
+		box-sizing: border-box;
 	}
 
-	.pane       { width: 100%; height: 100% }
+	.zen-mode {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		z-index: 11;
+	}
+
+	.pane { width: 100%; height: 100% }
 
-	/* @media (min-width: 768px) { */
+	@media (min-width: 768px) {
 		.repl-outer {
 			margin: 0 -4.8rem; /* can't do calc(0 - var(--side-nav)) */
-			height: calc(100vh - var(--nav-h));
-			background-color: var(--back);
-			overflow: hidden;
-			--app-controls-h: 5.6rem;
-			padding: var(--app-controls-h) 0 0 0;
-			box-sizing: border-box;
 		}
-
+	}
-		.repl-outer.zen-mode {
-			position: fixed;
-			width: 100%;
-			height: 100%;
-			top: 0;
-			z-index: 11;
-		}
-	/* } */
 
 	.loading {
 		text-align: center;

site/static/global.css

@@ -60,7 +60,7 @@ a:focus {
 	--sidebar-w:  24rem;
 	--main-width: 80rem;
 	--code-w:      72em;
-	--side-nav:  4.8rem;
+	--side-nav:   .8rem;
 	--side-page:   var(--side-nav);
 
 	/* easings */
@@ -390,6 +390,7 @@ table span {
 	:root {
 		--side-page:  14vw;
 		--top-offset: 10rem;
+		--side-nav: 4.8rem;
 	}
 }