Small themes

customGenerator.html

@@ -8,9 +8,10 @@
         #maindiv {
             position: absolute;
             width: 50vw;
-            height: 100%;
+            height: 100vh;
             left: 0;
             top: 0;
+            overflow-y: auto;
         }
 
         #preview {
@@ -19,6 +20,8 @@
             height: 100vh;
             right: 0;
             top: 0;
+            word-break: break-all;
+            overflow-y: auto;
         }
         
         .bordered {

index.css

@@ -1195,6 +1195,7 @@ form {
     display: inline-block;
     background-color: lightgray;
     padding: 0.5em;
+    word-break: break-all;
 }
 
 .iframe-code-block {

themeGenerator.ts

@@ -43,7 +43,12 @@ export class Preview extends UIElement {
 
     InnerRender(): string {
         const url = this.url.data;
-        return JSON.stringify(this.config.data, null, 2)
+        return new Combine([
+            `<iframe width="100%" height="50%" src="${this.url.data}"></iframe>`,
+            `<br/><br><h2>Save this link below:</h2><a target='_blank' href='${this.url.data}'>${this.url.data}</a>`,
+            JSON.stringify(this.config.data, null, 2).replace(/\n/g, "<br/>").replace(/ /g, "&nbsp;"),
+
+        ]).Render();
     }
 
 }