From 6071dccec4391663fca91ed7faa17eee94091aa1 Mon Sep 17 00:00:00 2001
From: Aculix Technologies <aculixapps@gmail.com>
Date: Sun, 16 Aug 2026 12:12:03 +0530
Subject: [PATCH] fix: recentre task rows, and give the phone layout its space
 back

Rows stopped being vertically centred. Aligning them to flex-start so the
controls stay on the first line of a wrapped task also let the 32px row
buttons set the row height, which left the 24px checkbox and text sitting
4px above centre on every single-line row. Everything on the first line
now occupies the same 32px band, so a single-line row centres and a
wrapped one still puts its controls on the first line. A padding shorthand
later in the same rule was quietly resetting the longhand that does it.

The phone layout was spending 372px of an 812px screen, 46% of it, before
the first task appeared. The header stacked into two rows because the
wordmark and the controls could not share one: they need 422px and there
are 343. The wordmark goes below 480px, since the logo carries the
identity and an installed app already has its name under the icon, and it
stays in the accessibility tree so the page keeps its h1. The heading and
date share a line again rather than stacking unconditionally. That is 372
down to 261, 46% down to 32%.

That left the rows themselves too tight, because both actions stay visible
where there is no hover and were taking 44% of the row width, cutting the
text to 21 characters a line. Tighter gaps and padding, and a smaller
drawn button whose 44px target comes from the overlay underneath rather
than its own box, bring that back to 24.
---
 src/style.css | 93 +++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 72 insertions(+), 21 deletions(-)

diff --git a/src/style.css b/src/style.css
index 951b4cd..230f89e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -345,6 +345,8 @@ html.dark .task-item.dragging {
 .checkbox {
   width: 24px;
   height: 24px;
+  /* Pads the 24px box out to the 32px first-line band set by the row buttons. */
+  margin-block: 4px;
   border: 2px solid var(--border);
   border-radius: 6px;
   background: transparent;
@@ -386,7 +388,11 @@ html.dark .task-item.dragging {
   text-align: left;
   background: transparent;
   border: none;
-  padding: 0;
+  padding-inline: 0;
+  /* Pads the 24px line box out to the 32px first-line band the row buttons
+     set, so the text centres against the checkbox. Declared as a longhand
+     because a `padding: 0` shorthand here would reset it. */
+  padding-block: 4px;
   font-family: inherit;
   cursor: text;
   font-size: 16px;
@@ -608,6 +614,14 @@ html.dark .data-status.error {
 }
 
 @media (pointer: coarse) {
+  /* Smaller drawn box, same 44px target from the overlay below, and the
+     margin keeps it in the 32px first-line band. */
+  .row-btn {
+    width: 28px;
+    height: 28px;
+    margin-block: 2px;
+  }
+
   .checkbox::after,
   .row-btn::after {
     content: '';
@@ -639,7 +653,7 @@ html.dark .data-status.error {
      itself, so it stays aligned with the checkbox on the first line. */
   .task-text {
     padding-block: 10px;
-    margin-block: -10px;
+    margin-block: -6px;
   }
 
   .clear-completed,
@@ -664,37 +678,59 @@ html.dark .data-status.error {
 
 @media (max-width: 768px) {
   .header {
-    padding: calc(16px + env(safe-area-inset-top)) 24px 16px;
+    padding: calc(12px + env(safe-area-inset-top)) 20px 12px;
   }
 
+  /* One row rather than two. Stacking cost a whole row of height on the
+     screen with the least of it to spare. */
   .header-content {
-    flex-direction: column;
-    gap: 16px;
-    align-items: flex-start;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .logo-section {
+    gap: 10px;
+    min-width: 0;
   }
 
   .header-actions {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  .container {
-    padding: 0 24px;
-  }
-
-  .content-header {
-    flex-direction: column;
-    align-items: flex-start;
+    margin-left: auto;
     gap: 8px;
   }
 
-  .section-title {
-    font-size: 28px;
+  .main {
+    padding-top: 24px;
   }
 
+  .container {
+    padding: 0 20px;
+  }
+
+  /* Wraps rather than stacking unconditionally, so the date only drops to
+     its own line when it genuinely cannot share one. */
+  .content-header {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 2px 12px;
+    margin-bottom: 20px;
+  }
+
+  .section-title {
+    font-size: 22px;
+  }
+
+  .task-input {
+    padding: 16px 18px;
+  }
+
+  /* Both row actions stay visible on touch because there is no hover to
+     reveal them, and at this width they were eating 44% of the row. Tighter
+     gaps and padding hand that back to the text. */
   .task-item {
-    padding: 20px;
-    min-height: 48px;
+    padding: 14px 16px;
+    gap: 10px;
   }
 
   .task-input {
@@ -708,6 +744,21 @@ html.dark .data-status.error {
     padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
   }
 
+  /* The wordmark is what stops the header fitting on one line here: it needs
+     422px of row and there are 343. The logo carries the identity, and the
+     installed app already has the name under its icon. Kept in the
+     accessibility tree so the page still has its h1. */
+  .app-title {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
   .container {
     padding: 0 16px;
   }