diff --git a/src/script.js b/src/script.js
index 393dd70..bedfa9a 100644
--- a/src/script.js
+++ b/src/script.js
@@ -417,20 +417,23 @@ const svg_editor = monaco.editor.create(svg_text_element, {
const update_sizes = () => {
const zpl_params = {
- width: code_text_element.parentElement?.clientWidth || 0 - 10,
- height: code_text_element.parentElement?.clientHeight || 0 - 130
+ width: (code_text_element.parentElement?.clientWidth || 0) - 10,
+ height: (code_text_element.parentElement?.clientHeight || 0) - 10
}
const svg_params = {
- width: svg_text_element.parentElement?.clientWidth || 0 - 10,
- height: svg_text_element.parentElement?.clientHeight || 0 - 130
+ width: (svg_text_element.parentElement?.clientWidth || 0) - 10,
+ height: (svg_text_element.parentElement?.clientHeight || 0) - 10
}
const body_width = document.body.clientWidth
+ // zpl_editor.layout(zpl_params)
+ // svg_editor.layout(svg_params)
zpl_editor.layout(zpl_params)
svg_editor.layout(svg_params)
// show minimap only when body_width >= 1600
zpl_editor.updateOptions({ minimap: { enabled: body_width >= 1600 } })
svg_editor.updateOptions({ minimap: { enabled: body_width >= 1600 } })
+
}
update_sizes()
diff --git a/src/style.css b/src/style.css
index 34bdbb6..ea42c1f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -16,9 +16,19 @@ a:hover { color: #0F5; }
div.output {
display: grid;
- grid-template-columns: 1fr 2fr !important;
+ grid-template-columns: 1fr 2fr; /* Desktop and larger screens*/
width: 100%;
height: 80vh !important;
+ padding-top: 10px;
+ margin-bottom: 15px;
+}
+
+/* handle mobile devices */
+@media (max-width: 1000px) {
+ div.output {
+ grid-template-columns: 1fr !important; /* Mobile and smaller screens */
+ height: 50vh !important;
+ }
}
.content {
@@ -98,4 +108,6 @@ div.output pre div, div.output pre textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-} */
\ No newline at end of file
+} */
+
+.monaco-editor { position: absolute !important; }
\ No newline at end of file