From f9ae76a87d48c0a0b5ac117b84e9918904d3c1d1 Mon Sep 17 00:00:00 2001
From: Aculix Technologies <aculixapps@gmail.com>
Date: Sun, 16 Aug 2026 03:41:07 +0530
Subject: [PATCH] fix: focus rings and tap targets for the new controls

A pass over what the last four changes added.

The focus-visible rule named a handful of controls by hand and had gone
stale. It still pointed at .today-btn, which no longer exists, and none of
the five newer controls were listed, so tabbing to the defer arrow, either
day option, the task text, the Undo button or the dismiss cross showed
nothing at all. They are all covered now, and the row buttons reveal
themselves when focused, since a ring on a transparent button is not much
use.

Tap targets on touch: the day options came out 36px tall because the
switch's own padding and border ate into its height, and the task text was
24. The switch is 46 with the padding removed so its buttons get the full
44, and the theme toggle matches so the header stays level. The text grows
by padding with the same amount taken back as negative margin, so it is
44px to a finger without moving off the first line.

Also drops the fade on the carry-over notice. It was hiding whether the
thing was actually unmounting, and a fade earns very little on something
that appears once a day.

Checked at both widths and in both themes: contrast passes on every new
element, nothing scrolls sideways, and a fresh load runs the whole feature
set with no console errors.
---
 src/style.css | 41 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/style.css b/src/style.css
index 596fbec..951b4cd 100644
--- a/src/style.css
+++ b/src/style.css
@@ -619,9 +619,27 @@ html.dark .data-status.error {
     transform: translate(-50%, -50%);
   }
 
-  .day-switch,
+  /* 46 rather than 44, because the switch's own padding and border eat into
+     the height its buttons actually get. The theme toggle follows so the two
+     stay level in the header. */
+  .day-switch {
+    height: 46px;
+    padding: 0;
+  }
+
+  .day-option {
+    border-radius: 7px;
+  }
+
   .theme-toggle {
-    height: 44px;
+    height: 46px;
+  }
+
+  /* Grows the tappable area of the task text to 44px without moving the text
+     itself, so it stays aligned with the checkbox on the first line. */
+  .task-text {
+    padding-block: 10px;
+    margin-block: -10px;
   }
 
   .clear-completed,
@@ -703,15 +721,28 @@ html.dark .data-status.error {
   }
 }
 
+/* Every control, listed once. The previous version named a handful by hand
+   and had already gone stale: it still pointed at .today-btn, which no
+   longer exists, while five newer controls had no focus ring at all. */
 .checkbox:focus-visible,
-.delete-btn:focus-visible,
+.row-btn:focus-visible,
+.task-text:focus-visible,
+.task-edit:focus-visible,
 .theme-toggle:focus-visible,
-.today-btn:focus-visible,
-.clear-completed:focus-visible {
+.day-option:focus-visible,
+.clear-completed:focus-visible,
+.data-link:focus-visible,
+.undo-action:focus-visible,
+.carried-dismiss:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
 
+/* Hidden controls cannot show a focus ring, so reveal them when tabbed to. */
+.row-btn:focus-visible {
+  opacity: 1;
+}
+
 html {
   scroll-behavior: smooth;
 }