From 0e189e53b3d62734f3cf06f2d5f6bfa6235acf31 Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Mon, 11 May 2026 15:43:14 +0200
Subject: [PATCH] fix: vertically center icons, checkbox, and text in task rows

Changed alignItems from flex-start to center on outer div and span.
Removed manual top/left offsets on checkbox (no longer needed with
center alignment). Icon column uses justifyContent: center.

v1.111.4
---
 package.json                     |  2 +-
 src/components/GridTaskBlock.tsx | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 7b6a91f..3c9b512 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.111.3",
+  "version": "1.111.4",
   "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
   "main": "index.js",
   "scripts": {
diff --git a/src/components/GridTaskBlock.tsx b/src/components/GridTaskBlock.tsx
index a5cdcc8..9c53367 100644
--- a/src/components/GridTaskBlock.tsx
+++ b/src/components/GridTaskBlock.tsx
@@ -299,7 +299,7 @@ export function GridTaskBlock({
                 if (editingTaskId !== task.id) toggleTask(task.id);
             }}
         >
-            <div style={{ display: "flex", alignItems: "flex-start", gap: "0.25rem", width: "100%", justifyContent: "space-between" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: "0.25rem", width: "100%", justifyContent: "space-between" }}>
                 {editingTaskId === task.id ? (
                     <form
                         onSubmit={(e) => {
@@ -329,7 +329,7 @@ export function GridTaskBlock({
                     <span
                         style={{
                             display: "flex",
-                            alignItems: "flex-start",
+                            alignItems: "center",
                             gap: "3px",
                             overflow: "visible",
                             whiteSpace: "pre-wrap",
@@ -342,7 +342,7 @@ export function GridTaskBlock({
                         }}
                     >
                         {(showPriorityIcons || showProjectIcons) && (
-                            <span style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", width: "14px", minWidth: "14px", flexShrink: 0, gap: "2px", paddingTop: "1px", opacity: task.completed && showTaskCheckboxes ? 0.5 : 1 }}>
+                            <span style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "14px", minWidth: "14px", flexShrink: 0, gap: "2px", opacity: task.completed && showTaskCheckboxes ? 0.5 : 1 }}>
                                 {showPriorityIcons && (() => {
                                     const pb = getPriorityBadge(task, priorityStyle, 11);
                                     return pb ? (
@@ -380,7 +380,7 @@ export function GridTaskBlock({
                                 onChange={(e) => { e.stopPropagation(); toggleTask(task.id); }}
                                 onClick={(e) => e.stopPropagation()}
                                 className="task-checkbox flex-shrink-0"
-                                style={{ width: "12px", height: "12px", margin: 0, cursor: "pointer", position: "relative", top: "3px", left: "-2px", accentColor: "#FFF" }}
+                                style={{ width: "12px", height: "12px", margin: 0, cursor: "pointer", flexShrink: 0, accentColor: "#FFF" }}
                             />
                         )}
                         <span style={task.completed && showTaskCheckboxes ? { opacity: 0.5, flex: 1, display: "flex", alignItems: "center", flexWrap: "wrap", rowGap: "2px" } : { flex: 1, display: "flex", alignItems: "center", flexWrap: "wrap", rowGap: "2px" }}>
@@ -510,7 +510,7 @@ export function GridTaskBlock({
                         synology: { icon: faServer, color: "#007AFF", label: "Synology" },
                     };
                     return (
-                        <span style={{ display: "flex", alignItems: "flex-start", gap: "3px", flexShrink: 0, paddingTop: "2px" }}>
+                        <span style={{ display: "flex", alignItems: "center", gap: "3px", flexShrink: 0 }}>
                             {rolling && (
                                 <span title="Auto-rolling task" style={{ display: "inline-flex", alignItems: "center", color: "var(--weekly-teal, #009a9a)" }}>
                                     <svg viewBox="0 0 24 24" width="10" height="10" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">