Prevent focus grab by inactive task remove button

Only works for new note - edit note dialog might require
special treatment.

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.querySelector("textarea");
+      const textareaInside = e.target.querySelectorAll("textarea")[1];
       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();
-  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);
     }
   });
 

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;
-}
+  width: 100vw;
-
-body:has(dialog[open]) {
-  overflow: hidden;
 }
 
 img,
@@ -179,7 +176,11 @@ task-list li:has(.checkbox input:checked) {
 }
 
 task-list-item .remove {
-  visibility: hidden;
+  width: 3em;
+}
+
+task-list-item .remove button {
+  display: none;
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -187,17 +188,17 @@ task-list-item .remove {
     background: var(--highlight-color);
   }
 
-  task-list li:hover .remove {
+  task-list li:hover .remove button {
-    visibility: visible;
+    display: block;
   }
 }
 
-task-list-item .remove:has(button:active) {
+task-list-item .remove button:active {
-  visibility: visible;
+  display: block;
 }
 
-task-list-item:has(textarea:focus) .remove {
+task-list-item:has(textarea:focus) .remove button {
-  visibility: visible;
+  display: block;
 }
 
 task-list-item .checkbox input {