more tweaks

Author: Rich-Harris

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;
 		}

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

@@ -344,7 +344,7 @@
 		display: none;
 	}
 
-	@media (min-width: 768px) {
+	@media (min-width: 600px) {
 		.icon[title^='fullscreen'] { display: inline }
 
 		button span {

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;

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}

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;

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;

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 {

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}

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}>

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>

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)) */
 		}