fix: layout overflowing in case of long unbroken lines

josdejong · Jun 30, 2021 · 4d4f15c · 4d4f15c
1 parent 720946e
commit 4d4f15c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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 {