From 2e0d7d044b87e23bd1ef2ab478a305e7686b21b8 Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Sun, 9 Nov 2025 01:32:38 +0100
Subject: [PATCH] Make minor mobile focused UI fixes (#1)

* Fix mistyped event listener definition

* Fix misalignment between textarea and p in editable component

* Avoid reflow on title hiding/showing

* Add extra padding around checkbox
---
 priv/static/js/components.js |  2 +-
 priv/static/style.css        | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/priv/static/js/components.js b/priv/static/js/components.js
index 4e7072a..68a664f 100644
--- a/priv/static/js/components.js
+++ b/priv/static/js/components.js
@@ -127,7 +127,7 @@ class EditableArea extends HTMLElement {
     });
 
     this.inputElement.addEventListener("blur", () => {
-      document.removeEventLitener("touchmove", onTouchMove);
+      document.removeEventListener("touchmove", onTouchMove);
     });
 
     new ResizeObserver(() => {
diff --git a/priv/static/style.css b/priv/static/style.css
index 50b603e..0a5fa89 100644
--- a/priv/static/style.css
+++ b/priv/static/style.css
@@ -145,6 +145,7 @@ editable-area textarea {
   font-size: inherit;
   font-family: inherit;
   line-height: inherit;
+  line-break: inherit;
   text-indent: inherit;
   letter-spacing: inherit;
   padding: 0;
@@ -224,9 +225,13 @@ task-list-item .handle {
   cursor: grab;
 }
 
+task-list-item .checkbox {
+  padding: 0 4px;
+}
+
 task-list-item .checkbox input {
-  width: 1.1em;
-  height: 1.1em;
+  width: 1.3em;
+  height: 1.3em;
 }
 
 li.dragging {
@@ -248,11 +253,11 @@ task-list ul {
 
 note-form:focus-within .title,
 note-form .title:has(.non-empty) {
-  display: block;
+  visibility: visible;
 }
 
 note-form .title {
-  display: none;
+  visibility: hidden;
   font-size: 1.2em;
   font-weight: bold;
 }