fix dialog size and open

static/css/styles.css

@@ -20,6 +20,10 @@ h1 {
     font-size: 24px;
 }
 
+h2 {
+    margin-top: 0;
+}
+
 table {
     width: 100%;
     border-collapse: collapse;
@@ -88,20 +92,12 @@ fieldset {
 }
 /* Dialog box */
 dialog {
-    width: 400px;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     overflow: hidden;
-}
-
-dialog.create {
-    height: 320px;
-}
-
-dialog.update {
-    height: 500px;
+    width: 400px;
 }
   
   /* Labels */
@@ -126,6 +122,10 @@ input, select {
     width: 100%;
 }
 
+form {
+    margin: 0;
+}
+
 form fieldset:last-child {
     margin-top: 20px;
     text-align: right;

static/js/main.js

@@ -1,26 +1,25 @@
 document.addEventListener('DOMContentLoaded', documentReady, false);
-window.onmessage = (event) => {
-    if (event.data == "close") {
-        document.querySelector("dialog[open]").close();
+
+function documentReady() {
+    const iframe = document.querySelector("iframe"); 
+    const dialog = document.querySelector("dialog");
+    iframe.onload = () => {
+        dialog.style.height = iframe.contentWindow.document.body.getBoundingClientRect().height + "px";
     }
 }
 
-function documentReady() {
-    const iframe = document.querySelector("iframe");
-    iframe.onload=(event) => {
-        const openDialog = document.querySelector("dialog[open]");
-        if (openDialog) {
-            openDialog.close();
-            window.location.reload();
-        } else {
-            const dialog = document.querySelector("dialog")
-            if (iframe.contentWindow.location.href.split("/").pop() === "create") {
-                dialog.className = 'create';
-            } else {
-                dialog.className = 'update';
-            }
-            dialog.showModal()
-
-        }
+window.onmessage = (event) => {
+    if (event.data == "close") {
+        const dialog = document.querySelector("dialog[open]");
+        const iframe = document.querySelector("iframe"); 
+        dialog.close();
+        iframe.src = "about:blank"
     }
+}
+
+function onOpenDialog(href) {
+    const iframe = document.querySelector("iframe"); 
+    const dialog = document.querySelector("dialog");
+    iframe.contentWindow.location = href; 
+    dialog.showModal();
 }