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
This commit is contained in:
Adrian Gruntkowski 2025-11-09 01:32:38 +01:00 committed by GitHub
parent 3e057e0558
commit 2e0d7d044b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 5 deletions

View file

@ -127,7 +127,7 @@ class EditableArea extends HTMLElement {
}); });
this.inputElement.addEventListener("blur", () => { this.inputElement.addEventListener("blur", () => {
document.removeEventLitener("touchmove", onTouchMove); document.removeEventListener("touchmove", onTouchMove);
}); });
new ResizeObserver(() => { new ResizeObserver(() => {

View file

@ -145,6 +145,7 @@ editable-area textarea {
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
line-height: inherit; line-height: inherit;
line-break: inherit;
text-indent: inherit; text-indent: inherit;
letter-spacing: inherit; letter-spacing: inherit;
padding: 0; padding: 0;
@ -224,9 +225,13 @@ task-list-item .handle {
cursor: grab; cursor: grab;
} }
task-list-item .checkbox {
padding: 0 4px;
}
task-list-item .checkbox input { task-list-item .checkbox input {
width: 1.1em; width: 1.3em;
height: 1.1em; height: 1.3em;
} }
li.dragging { li.dragging {
@ -248,11 +253,11 @@ task-list ul {
note-form:focus-within .title, note-form:focus-within .title,
note-form .title:has(.non-empty) { note-form .title:has(.non-empty) {
display: block; visibility: visible;
} }
note-form .title { note-form .title {
display: none; visibility: hidden;
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
} }