From 8e826e618d0ea1302c445c920ea87931b0b2a2fb Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 23 Dec 2018 18:54:50 -0500
Subject: [PATCH] more tweaks

---
 .../_components/AppControls/UserMenu.html     |  2 +-
 .../repl/_components/AppControls/index.html   |  2 +-
 .../routes/repl/_components/CodeMirror.html   | 13 +------
 .../_components/Input/ComponentSelector.html  |  2 +-
 .../repl/_components/Input/ModuleEditor.html  |  2 +-
 .../repl/_components/Output/Viewer.html       | 16 ++------
 .../routes/repl/_components/Output/index.html |  1 +
 site/src/routes/repl/_components/Repl.html    |  4 +-
 .../routes/repl/_components/SplitPane.html    | 37 +++++++------------
 site/src/routes/repl/embed.html               | 11 ++----
 site/src/routes/repl/index.html               |  2 +-
 11 files changed, 29 insertions(+), 63 deletions(-)

diff --git a/site/src/routes/repl/_components/AppControls/UserMenu.html b/site/src/routes/repl/_components/AppControls/UserMenu.html
index c1ec7ede34..eff898df82 100644
--- a/site/src/routes/repl/_components/AppControls/UserMenu.html
+++ b/site/src/routes/repl/_components/AppControls/UserMenu.html
@@ -85,7 +85,7 @@
 		opacity: 1;
 	}
 
-	@media (min-width: 768px) {
+	@media (min-width: 600px) {
 		.user {
 			padding: 0em 3.2rem 0 1.6rem;
 		}
diff --git a/site/src/routes/repl/_components/AppControls/index.html b/site/src/routes/repl/_components/AppControls/index.html
index 48fff29e1f..fcc9ab4ee0 100644
--- a/site/src/routes/repl/_components/AppControls/index.html
+++ b/site/src/routes/repl/_components/AppControls/index.html
@@ -344,7 +344,7 @@ export default app;` });
 		display: none;
 	}
 
-	@media (min-width: 768px) {
+	@media (min-width: 600px) {
 		.icon[title^='fullscreen'] { display: inline }
 
 		button span {
diff --git a/site/src/routes/repl/_components/CodeMirror.html b/site/src/routes/repl/_components/CodeMirror.html
index 3f227e8b27..bb8c72b281 100644
--- a/site/src/routes/repl/_components/CodeMirror.html
+++ b/site/src/routes/repl/_components/CodeMirror.html
@@ -148,6 +148,8 @@
 	.codemirror-container {
 		position: relative;
 		width: 100%;
+		height: 100%;
+		border: none;
 	}
 
 	.codemirror-container :global(.CodeMirror) {
@@ -166,17 +168,6 @@
 		padding: 0;
 	}
 
-	@media (min-width: 768px) {
-		.codemirror-container {
-			height: 100%;
-			border: none;
-		}
-
-		.codemirror-container :global(.CodeMirror) {
-			height: 100%;
-		}
-	}
-
 	.codemirror-container :global(.CodeMirror-gutters) {
 		padding: 0 1.6rem 0 .8rem;
 		border: none;
diff --git a/site/src/routes/repl/_components/Input/ComponentSelector.html b/site/src/routes/repl/_components/Input/ComponentSelector.html
index 39ce470471..a086e3ba94 100644
--- a/site/src/routes/repl/_components/Input/ComponentSelector.html
+++ b/site/src/routes/repl/_components/Input/ComponentSelector.html
@@ -168,7 +168,7 @@
 </style>
 
 <div class="component-selector">
-	<div class="file-tabs" on:dblclick="{() => dispatch('create')}">
+	<div class="file-tabs" on:dblclick="{addNew}">
 		{#each $component_store as component}
 			<button
 				id={component.name}
diff --git a/site/src/routes/repl/_components/Input/ModuleEditor.html b/site/src/routes/repl/_components/Input/ModuleEditor.html
index 783dc02dc9..c45c86202b 100644
--- a/site/src/routes/repl/_components/Input/ModuleEditor.html
+++ b/site/src/routes/repl/_components/Input/ModuleEditor.html
@@ -13,7 +13,7 @@
 		background: var(--back-light);
 	}
 
-	@media (min-width: 768px) {
+	@media (min-width: 600px) {
 		.editor-wrapper {
 			/* make it easier to interact with scrollbar */
 			padding-right: 8px;
diff --git a/site/src/routes/repl/_components/Output/Viewer.html b/site/src/routes/repl/_components/Output/Viewer.html
index aeeb49060a..b7bb73f8ed 100644
--- a/site/src/routes/repl/_components/Output/Viewer.html
+++ b/site/src/routes/repl/_components/Output/Viewer.html
@@ -297,29 +297,19 @@
 
 <style>
 	.iframe-container {
-		border-top: 1px solid #ccc;
 		background-color: white;
+		border: none;
+		height: 100%;
 	}
 
 	iframe {
 		width: 100%;
-		height: calc(100vh -3em);
+		height: 100%;
 		/* height: calc(100vh - var(--nav-h)); */
 		border: none;
 		display: block;
 	}
 
-	@media (min-width: 768px) {
-		.iframe-container {
-			border: none;
-			height: 100%;
-		}
-
-		iframe {
-			height: 100%;
-		}
-	}
-
 	.greyed-out {
 		filter: grayscale(50%) blur(1px);
 		opacity: .25;
diff --git a/site/src/routes/repl/_components/Output/index.html b/site/src/routes/repl/_components/Output/index.html
index 5f05487415..a245aa90f5 100644
--- a/site/src/routes/repl/_components/Output/index.html
+++ b/site/src/routes/repl/_components/Output/index.html
@@ -48,6 +48,7 @@
 	.view-toggle {
 		height: var(--pane-controls-h);
 		border-bottom: 1px solid #eee;
+		white-space: nowrap;
 	}
 
 	button {
diff --git a/site/src/routes/repl/_components/Repl.html b/site/src/routes/repl/_components/Repl.html
index c6069c3a2f..edca340799 100644
--- a/site/src/routes/repl/_components/Repl.html
+++ b/site/src/routes/repl/_components/Repl.html
@@ -250,7 +250,7 @@
 		transform: translate(-50%,0);
 	}
 
-	@media (min-width: 768px) {
+	@media (min-width: 600px) {
 		.container {
 			height: 100%;
 		}
@@ -272,7 +272,7 @@
 
 <div class="container" bind:clientWidth={width}>
 	<div class="repl-inner" class:offset="{show_output}">
-		<SplitPane type="horizontal" fixed="{768 > width}" pos={60} fixed_pos={50}>
+		<SplitPane type="horizontal" fixed="{600 > width}" pos={60} fixed_pos={50}>
 			<section slot=a>
 				<Input
 					{component_store}
diff --git a/site/src/routes/repl/_components/SplitPane.html b/site/src/routes/repl/_components/SplitPane.html
index e65cdcca38..a79ef8b775 100644
--- a/site/src/routes/repl/_components/SplitPane.html
+++ b/site/src/routes/repl/_components/SplitPane.html
@@ -126,33 +126,22 @@
 		height: 1px;
 	}
 
-	/* @media (max-width: 767px) {
-		.pane {
-			override divider-set dimensions
-			width: 100% !important;
-			height: auto !important;
-		}
-	} */
-
-	/* @media (min-width: 768px) { */
-		.left, .right, .divider {
-			display: block;
-
-		}
+	.left, .right, .divider {
+		display: block;
+	}
 
-		.left, .right {
-			height: 100%;
-			float: left;
-		}
+	.left, .right {
+		height: 100%;
+		float: left;
+	}
 
-		.top, .bottom {
-			position: absolute;
-			width: 100%;
-		}
+	.top, .bottom {
+		position: absolute;
+		width: 100%;
+	}
 
-		.top { top: 0; }
-		.bottom { bottom: 0; }
-	/* } */
+	.top { top: 0; }
+	.bottom { bottom: 0; }
 </style>
 
 <div class="container" bind:this={refs.container}>
diff --git a/site/src/routes/repl/embed.html b/site/src/routes/repl/embed.html
index 5d1f3ce329..6e8533a29f 100644
--- a/site/src/routes/repl/embed.html
+++ b/site/src/routes/repl/embed.html
@@ -84,16 +84,11 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
+		background-color: var(--back);
+		overflow: hidden;
+		box-sizing: border-box;
 		--pane-controls-h: 4.2rem;
 	}
-
-	/* @media (min-width: 768px) { */
-		.repl-outer {
-			background-color: var(--back);
-			overflow: hidden;
-			box-sizing: border-box;
-		}
-	/* } */
 </style>
 
 <svelte:head>
diff --git a/site/src/routes/repl/index.html b/site/src/routes/repl/index.html
index f640c162b9..e20570892b 100644
--- a/site/src/routes/repl/index.html
+++ b/site/src/routes/repl/index.html
@@ -157,7 +157,7 @@
 
 	.pane { width: 100%; height: 100% }
 
-	@media (min-width: 768px) {
+	@media (min-width: 600px) {
 		.repl-outer {
 			margin: 0 -4.8rem; /* can't do calc(0 - var(--side-nav)) */
 		}