From 6fc0ccef7429fc6dc2c0b256f5293ec66b4a666a Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Mon, 23 Mar 2026 13:58:43 +0100
Subject: [PATCH] fix: inline project icons so multi-line text wraps around
 them

Move project icons from flex siblings into the text span so that
multi-line task titles wrap around the icon instead of leaving
empty space below it.

v1.59.4

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json                     |  2 +-
 src/components/GridTaskBlock.tsx | 14 +++++++-------
 src/components/WeeklyView.tsx    | 10 +++++-----
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 1a65562..14490f9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.59.3",
+  "version": "1.59.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 df9f6e8..8d2f0c1 100644
--- a/src/components/GridTaskBlock.tsx
+++ b/src/components/GridTaskBlock.tsx
@@ -306,18 +306,18 @@ export function GridTaskBlock({
                             />
                         )}
                         <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" }}>
-                            {showProjectIcons && task.project && (() => {
+                            <span style={{ marginRight: "4px" }}>{showProjectIcons && task.project && (() => {
                                 const found = allIcons.find(i => i.name === task.project!.icon);
+                                const iconStyle = { marginRight: "4px", verticalAlign: "middle" } as const;
                                 if (found) {
                                     return found.type === "fa"
-                                        ? <FontAwesomeIcon icon={found.icon as IconDefinition} style={{ fontSize: "11px", marginRight: "4px", color: task.project!.color || "#888", flexShrink: 0 }} />
-                                        : <MdiIcon path={found.icon as string} size={0.5} color={task.project!.color || "#888"} style={{ marginRight: "3px", flexShrink: 0 }} />;
+                                        ? <FontAwesomeIcon icon={found.icon as IconDefinition} style={{ fontSize: "11px", ...iconStyle, color: task.project!.color || "#888" }} />
+                                        : <MdiIcon path={found.icon as string} size={0.5} color={task.project!.color || "#888"} style={{ ...iconStyle, display: "inline-block" }} />;
                                 }
                                 return task.project!.icon
-                                    ? <span style={{ fontSize: "11px", marginRight: "3px", flexShrink: 0 }}>{task.project!.icon}</span>
-                                    : <FontAwesomeIcon icon={faFolder} style={{ fontSize: "11px", marginRight: "4px", color: task.project!.color || "#888", flexShrink: 0 }} />;
-                            })()}
-                            <span style={{ marginRight: "4px" }}>{task.title}</span>
+                                    ? <span style={{ fontSize: "11px", ...iconStyle }}>{task.project!.icon}</span>
+                                    : <FontAwesomeIcon icon={faFolder} style={{ fontSize: "11px", ...iconStyle, color: task.project!.color || "#888" }} />;
+                            })()}{task.title}</span>
                             {/* Subtask indicator */}
                             {task.subTasks && task.subTasks.length > 0 && (() => {
                                 const completed = task.subTasks.filter(s => s.completed).length;
diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index 5fd629a..ebf1e52 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -9760,11 +9760,6 @@ function TaskItem({
                                         }}
                                     />
                                 )}
-                                {showProjectIcons && task.project && (
-                                    <span style={{ flexShrink: 0, position: "relative", top: "2px" }}>
-                                        <ProjectIcon icon={task.project.icon} size={13} color={task.project.color || "#888"} />
-                                    </span>
-                                )}
                                 <span
                                     style={{
                                         whiteSpace: "pre-wrap",
@@ -9773,6 +9768,11 @@ function TaskItem({
                                         flex: 1,
                                     }}
                                 >
+                                    {showProjectIcons && task.project && (
+                                        <span style={{ marginRight: "4px", verticalAlign: "middle" }}>
+                                            <ProjectIcon icon={task.project.icon} size={13} color={task.project.color || "#888"} />
+                                        </span>
+                                    )}
                                     {task.title}
                                 </span>
                                 {(() => {