From 4d4f15cc17f3fe86d265df376783fca7070c51b9 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Wed, 30 Jun 2021 15:40:46 +0200
Subject: [PATCH] fix: layout overflowing in case of long unbroken lines

---
 src/components/JSONEditor.scss              |  1 +
 src/components/modes/treemode/TreeMode.scss |  1 +
 tools/develop-svelte/src/DevelopApp.svelte  | 18 +++++++++---------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/JSONEditor.scss b/src/components/JSONEditor.scss
index e50d3782..7a4cd724 100644
--- a/src/components/JSONEditor.scss
+++ b/src/components/JSONEditor.scss
@@ -9,6 +9,7 @@
   position: relative;
   display: flex;
   flex-direction: row;
+  overflow: hidden;
 
   &.focus {
     box-shadow: $outline-shadow;
diff --git a/src/components/modes/treemode/TreeMode.scss b/src/components/modes/treemode/TreeMode.scss
index b57ce1cd..aaf64081 100644
--- a/src/components/modes/treemode/TreeMode.scss
+++ b/src/components/modes/treemode/TreeMode.scss
@@ -6,6 +6,7 @@
   flex-direction: column;
   position: relative;
   background: $white;
+  overflow: hidden;
 
   &:not(.visible) {
     visibility: hidden;
diff --git a/tools/develop-svelte/src/DevelopApp.svelte b/tools/develop-svelte/src/DevelopApp.svelte
index 41cf7ce2..dfe2065e 100644
--- a/tools/develop-svelte/src/DevelopApp.svelte
+++ b/tools/develop-svelte/src/DevelopApp.svelte
@@ -21,7 +21,8 @@
 			{
 				"<button onclick=alert('oopsie!!!')>test xss</button>": "xss?"
 			}
-		]
+		],
+		"long line": "longline".repeat(20) // TODO: neatly handle long lines without breaking spaces
 	}
 
 	const schema = {
@@ -165,10 +166,10 @@
 		<div class="left">
 			<p>
 				<label>
-					<input type="checkbox" bind:checked={$showTreeEditor} /> Show tree editor
+						<input type="checkbox" bind:checked={$showTreeEditor} /> Show tree editor
 				</label>
 			</p>
-			<div class="editor" style="height: {height}">
+			<div class="tree-editor" style="height: {height}">
 				{#if $showTreeEditor}
 					<JSONEditor
 						bind:text
@@ -244,21 +245,20 @@
 	.columns {
 		display: flex;
 		gap: 20px;
+		width: 100%;
+		max-width: 1200px;
 	}
 
 	.columns .left,
 	.columns .right {
 		flex: 1;
+		min-width: 0;
 	}
 
-	/*.editor {*/
-	/*	max-width: 800px;*/
-	/*	height: 400px;*/
-	/*}*/
+	.tree-editor {
+	}
 
 	.code-editor {
-		max-width: 800px;
-		/*height: 400px;*/
 	}
 
 	.data {