From ed4e3ab12d703c81a302a5ec42679de2c3aea499 Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Fri, 21 Mar 2025 00:20:10 +0100
Subject: [PATCH] Improve modal backdrop scroll prevention and vsizing

---
 priv/static/js/jenot.js | 22 +++++++++++++++++++---
 priv/static/style.css   |  7 ++-----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/priv/static/js/jenot.js b/priv/static/js/jenot.js
index 86c06fe..ace87e9 100644
--- a/priv/static/js/jenot.js
+++ b/priv/static/js/jenot.js
@@ -166,13 +166,13 @@ editNote.addEventListener("updateNoteInProgress", async (e) => {
 editNote.addEventListener("updateNote", async (e) => {
   await Notes.update(e.detail);
   Notes.saveStorage();
-  editNoteDialog.close();
+  closeModal(editNoteDialog);
 });
 
 editNote.addEventListener("deleteNote", async (e) => {
   await Notes.remove(e.detail);
   Notes.saveStorage();
-  editNoteDialog.close();
+  closeModal(editNoteDialog);
 });
 
 // The notes rendering routine is optimized to replace only
@@ -234,6 +234,22 @@ async function render() {
   notes.forEach((n) => (currentNotes[n.id] = structuredClone(n)));
 }
 
+function openModal(modal) {
+  document.body.style.top = `-${window.scrollY}px`;
+  document.body.style.position = "fixed";
+
+  modal.showModal();
+}
+
+function closeModal(modal) {
+  modal.close();
+
+  const scrollY = document.body.style.top;
+  document.body.style.position = "";
+  document.body.style.top = "";
+  window.scrollTo(0, parseInt(scrollY || "0") * -1);
+}
+
 function renderNote(note) {
   const container = document.createElement("div");
   container.id = note.id;
@@ -287,7 +303,7 @@ function renderNote(note) {
     if (e.target.tagName !== "A") {
       const note = await Notes.get(container.id);
       editNote.load(structuredClone(note));
-      editNoteDialog.showModal();
+      openModal(editNoteDialog);
     }
   });
 
diff --git a/priv/static/style.css b/priv/static/style.css
index 5f5e3de..608b0d0 100644
--- a/priv/static/style.css
+++ b/priv/static/style.css
@@ -50,7 +50,7 @@ dialog {
   border: 0;
   background: transparent;
   max-width: 100vw;
-  max-height: 100vh;
+  max-height: 90vh;
 }
 
 ::backdrop {
@@ -61,10 +61,7 @@ dialog {
 body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
-}
-
-body:has(dialog[open]) {
-  overflow: hidden;
+  width: 100vw;
 }
 
 img,