focus editor on selector blur, finesse styles

site/src/components/Repl/CodeMirror.svelte

@@ -58,6 +58,10 @@
 		editor.refresh();
 	}
 
+	export function focus() {
+		editor.focus();
+	}
+
 	const modes = {
 		js: {
 			name: 'javascript',

site/src/components/Repl/Input/ComponentSelector.svelte

@@ -5,7 +5,7 @@
 
 	export let handle_select;
 
-	const { components, selected } = getContext('REPL');
+	const { components, selected, request_focus } = getContext('REPL');
 
 	let editing = null;
 
@@ -32,6 +32,9 @@
 		handle_select($selected);
 
 		components = components; // TODO necessary?
+
+		// focus the editor, but wait a beat (so key events aren't misdirected)
+		setTimeout(request_focus);
 	}
 
 	function remove(component) {
@@ -99,10 +102,14 @@
 		font: 400 1.2rem/1.5 var(--font);
 		border-bottom: var(--border-w) solid transparent;
 		padding: 1.2rem 1.4rem 0.8rem 0.8rem;
-		margin: 0 0.5rem 0 0;
+		margin: 0;
 		color: #999;
 	}
 
+	.file-tabs .button:first-child {
+		padding-left: 1.2rem;
+	}
+
 	.file-tabs .button.active {
 		/* color: var(--second); */
 		color: #333;

site/src/components/Repl/Input/ModuleEditor.svelte

@@ -11,6 +11,10 @@
 	onMount(() => {
 		register_module_editor(editor);
 	});
+
+	export function focus() {
+		editor.focus();
+	}
 </script>
 
 <style>

site/src/components/Repl/Output/index.svelte

@@ -100,7 +100,7 @@
 		position: relative;
 		font: 400 1.2rem/1.5 var(--font);
 		border-bottom: var(--border-w) solid transparent;
-		padding: 1.2rem 0.8rem 0.8rem 0.8rem;
+		padding: 1.2rem 1.2rem 0.8rem 1.2rem;
 		color: #999;
 	}
 

site/src/components/Repl/index.svelte

@@ -113,6 +113,10 @@
 
 		register_output(handlers) {
 			output = handlers;
+		},
+
+		request_focus() {
+			module_editor.focus();
 		}
 	});