fix(rows): open on the first tap on iPhone, and round the hover highlight

On a touch screen a :hover on the tap target makes iOS spend the first tap applying the hover and only open on the second — the double-tap Kristian hit on tasks (and notes). The row hover is gated behind @media (hover: hover) now, so a touch has no hover to apply and the first tap opens. The note row's action buttons, which the hover used to reveal, are shown outright on touch instead. And the task-row hover highlight is a rounded box (border radius on the row), the same corner as a note in the list. Co-Authored-By: Claude Opus 4.8 <[email protected]>
2026-09-03 22:15:23 +02:00
34 changed files with 25 additions and 4 deletions
@@ -228,13 +228,21 @@
 		align-items: flex-start;
 		padding: var(--s3) var(--s2);
 		border-bottom: 1px solid var(--line);
+		border-radius: var(--radius);
 		transition:
 			opacity var(--medium) var(--ease),
 			transform var(--medium) var(--ease);
 	}

-	.row:hover {
-		background: var(--surface);
+	/* Hover only where there is a real pointer. On a touch screen a :hover on the tap
+	   target makes iOS spend the first tap applying the hover and only open on the
+	   second — the "double-tap" on iPhone. With no hover to apply, the first tap opens
+	   the task. The rounded corners are on the row itself, so the highlight is a
+	   rounded box like a note in the list. */
+	@media (hover: hover) {
+		.row:hover {
+			background: var(--surface);
+		}
 	}

 	/* The exit: a short lift and fade, so completing something reads as the task
@@ -1495,8 +1495,21 @@
 		white-space: nowrap;
 	}

-	.row:hover {
-		background: var(--surface);
+	/* Pointer only. On a touch screen a :hover on the tap target costs a tap — iOS
+	   spends the first applying the hover and opens on the second. Gated, the first
+	   tap opens the note. The row's buttons are shown outright on touch below, since
+	   there is no hover to reveal them. */
+	@media (hover: hover) {
+		.row:hover {
+			background: var(--surface);
+		}
+	}
+
+	@media (hover: none) {
+		.star,
+		.archive-one {
+			opacity: 1;
+		}
 	}

 	.row.on {