4 files changed, 18 insertions, 7 deletions
diff --git a/src/main/resources/css/fileview.css b/src/main/resources/css/fileview.css
index 349980b..8341a80 100644
--- a/src/main/resources/css/fileview.css
+++ b/src/main/resources/css/fileview.css
@@ -2,6 +2,11 @@
     display: none;
 }
 
-.prettyprint {
+/* TODO: Fix duplicate scrollbars in previews */
+.prettyprint, .preview {
+    position: absolute;
+    min-height: 100%;
+    width: 100%;
     border: none !important;
+    overflow: visible;
 }
diff --git a/src/main/resources/css/layout.css b/src/main/resources/css/layout.css
index c11ee79..9c03575 100644
--- a/src/main/resources/css/layout.css
+++ b/src/main/resources/css/layout.css
@@ -1,7 +1,12 @@
 html, body {
     font-family: Arial, Helvetica, sans-serif;
+    color: #424242;
     padding: 0;
     margin: 0;
-    min-width: 100%;
-    min-height: 100%;
+    min-width: 100vw !important;
+    min-height: 100vh !important;
+}
+
+button {
+    color: #424242;
 }
diff --git a/src/main/resources/js/fileview.js b/src/main/resources/js/fileview.js
index c34ce27..78ed951 100644
--- a/src/main/resources/js/fileview.js
+++ b/src/main/resources/js/fileview.js
@@ -12,9 +12,10 @@ const originalContent = content.innerText;
 
 if (extension === "md" || extension === "html") {
     if (extension === "md")
-        preview.innerHTML = marked(originalContent);
-    else if (extension === "html")
-        preview.innerHTML = marked(originalContent);
+        preview.src = "data:text/html;charset=utf-8," + encodeURI(marked(originalContent));
+    else if (extension === "html") {
+        preview.src = "data:text/html;charset=utf-8," + encodeURI(originalContent);
+    }
 
     preview.style.display = "block";
     raw.style.display = "block";
diff --git a/src/main/resources/views/fileview.rocker.html b/src/main/resources/views/fileview.rocker.html
index bef1ad0..e92f037 100644
--- a/src/main/resources/views/fileview.rocker.html
+++ b/src/main/resources/views/fileview.rocker.html
@@ -18,5 +18,5 @@
     <label for="dark">Dark mode</label><input id="dark" type="checkbox">
 </span>
 <pre class="prettyprint" id="content"><code class="lang-@extension">@content</code></pre>
-<div class="preview" id="preview"></div>
+<iframe class="preview" id="preview"></iframe>
 }