priv/static/js/components.js

@@ -582,7 +582,7 @@ class NoteForm extends HTMLElement {
     this.reminderPicker = this.querySelector("reminder-picker");
 
     this.addEventListener("click", (e) => {
-      const textareaInside = e.target.querySelectorAll("textarea")[1];
+      const textareaInside = e.target.querySelector("textarea");
       if (textareaInside) {
         textareaInside.focus();
         return true;

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();
-  closeModal(editNoteDialog);
+  editNoteDialog.close();
 });
 
 editNote.addEventListener("deleteNote", async (e) => {
   await Notes.remove(e.detail);
   Notes.saveStorage();
-  closeModal(editNoteDialog);
+  editNoteDialog.close();
 });
 
 // The notes rendering routine is optimized to replace only
@@ -234,22 +234,6 @@ 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;
@@ -303,7 +287,7 @@ function renderNote(note) {
     if (e.target.tagName !== "A") {
       const note = await Notes.get(container.id);
       editNote.load(structuredClone(note));
-      openModal(editNoteDialog);
+      editNoteDialog.showModal();
     }
   });
 

priv/static/style.css

@@ -50,7 +50,7 @@ dialog {
   border: 0;
   background: transparent;
   max-width: 100vw;
-  max-height: 90vh;
+  max-height: 100vh;
 }
 
 ::backdrop {
@@ -61,7 +61,10 @@ dialog {
 body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
-  width: 100vw;
+}
+
+body:has(dialog[open]) {
+  overflow: hidden;
 }
 
 img,
@@ -176,11 +179,7 @@ task-list li:has(.checkbox input:checked) {
 }
 
 task-list-item .remove {
-  width: 3em;
-}
-
-task-list-item .remove button {
-  display: none;
+  visibility: hidden;
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -188,17 +187,17 @@ task-list-item .remove button {
     background: var(--highlight-color);
   }
 
-  task-list li:hover .remove button {
-    display: block;
+  task-list li:hover .remove {
+    visibility: visible;
   }
 }
 
-task-list-item .remove button:active {
-  display: block;
+task-list-item .remove:has(button:active) {
+  visibility: visible;
 }
 
-task-list-item:has(textarea:focus) .remove button {
-  display: block;
+task-list-item:has(textarea:focus) .remove {
+  visibility: visible;
 }
 
 task-list-item .checkbox input {