From 10e7ba98f10590d5962fe8252e7c757dce0f986d Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Mon, 11 May 2026 15:15:40 +0200
Subject: [PATCH] fix: always reserve icon column width for checkbox/text
 alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icon column (14px fixed width) is now always rendered when priority or
project icon settings are enabled, even when a task has no icons.
Each icon slot is a 12×12px centered container so icons are the same
size and horizontally aligned. Increased gap to 2px for breathing room.

v1.111.2
---
 package.json                     |  2 +-
 src/components/GridTaskBlock.tsx | 56 ++++++++++++++++++--------------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index fbada23..c2ff4e9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.111.1",
+  "version": "1.111.2",
   "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 2081978..d2e8fe3 100644
--- a/src/components/GridTaskBlock.tsx
+++ b/src/components/GridTaskBlock.tsx
@@ -341,31 +341,37 @@ export function GridTaskBlock({
                             setEditingTaskId(task.id);
                         }}
                     >
-                        {(() => {
-                            const pb = showPriorityIcons ? getPriorityBadge(task, priorityStyle, 11) : null;
-                            const hasProject = !!(showProjectIcons && task.project);
-                            if (!pb && !hasProject) return null;
-                            return (
-                                <span style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", flexShrink: 0, gap: "1px", paddingTop: "2px", opacity: task.completed && showTaskCheckboxes ? 0.5 : 1 }}>
-                                    {pb && <span title={pb.label} style={{ display: "inline-flex", alignItems: "center" }}>{pb.node}</span>}
-                                    {hasProject && (() => {
-                                        const rawIcon = task.project!.icon || "";
-                                        const normalised = rawIcon.startsWith("fa") && rawIcon.length > 2 && rawIcon[2] === rawIcon[2].toUpperCase()
-                                            ? rawIcon.slice(2, 3).toLowerCase() + rawIcon.slice(3)
-                                            : rawIcon;
-                                        const found = allIcons.find(i => i.name === normalised || i.name === rawIcon);
-                                        if (found) {
-                                            return found.type === "fa"
-                                                ? <FontAwesomeIcon icon={found.icon as IconDefinition} style={{ fontSize: "11px", color: task.project!.color || "#888" }} />
-                                                : <MdiIcon path={found.icon as string} size={0.5} color={task.project!.color || "#888"} style={{ display: "inline-block" }} />;
-                                        }
-                                        return task.project!.icon
-                                            ? <span style={{ fontSize: "11px" }}>{task.project!.icon}</span>
-                                            : <FontAwesomeIcon icon={faFolder} style={{ fontSize: "11px", color: task.project!.color || "#888" }} />;
-                                    })()}
-                                </span>
-                            );
-                        })()}
+                        {(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 }}>
+                                {showPriorityIcons && (() => {
+                                    const pb = getPriorityBadge(task, priorityStyle, 11);
+                                    return pb ? (
+                                        <span title={pb.label} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: "12px", height: "12px" }}>
+                                            {pb.node}
+                                        </span>
+                                    ) : null;
+                                })()}
+                                {showProjectIcons && task.project && (() => {
+                                    const rawIcon = task.project!.icon || "";
+                                    const normalised = rawIcon.startsWith("fa") && rawIcon.length > 2 && rawIcon[2] === rawIcon[2].toUpperCase()
+                                        ? rawIcon.slice(2, 3).toLowerCase() + rawIcon.slice(3)
+                                        : rawIcon;
+                                    const found = allIcons.find(i => i.name === normalised || i.name === rawIcon);
+                                    return (
+                                        <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: "12px", height: "12px" }}>
+                                            {found
+                                                ? (found.type === "fa"
+                                                    ? <FontAwesomeIcon icon={found.icon as IconDefinition} style={{ fontSize: "11px", color: task.project!.color || "#888" }} />
+                                                    : <MdiIcon path={found.icon as string} size={0.5} color={task.project!.color || "#888"} style={{ display: "inline-block" }} />)
+                                                : (task.project!.icon
+                                                    ? <span style={{ fontSize: "11px" }}>{task.project!.icon}</span>
+                                                    : <FontAwesomeIcon icon={faFolder} style={{ fontSize: "11px", color: task.project!.color || "#888" }} />)
+                                            }
+                                        </span>
+                                    );
+                                })()}
+                            </span>
+                        )}
                         {showTaskCheckboxes && (
                             <input
                                 type="checkbox"