From 4a5910779ea7613134a8bb5478f03449211198eb Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Mon, 11 May 2026 15:36:57 +0200
Subject: [PATCH] fix: align checkboxes, right-align end icons, fix weather
 overlap

- borderLeft now always 4px (transparent when no project/kanban color)
  so all tasks have the same left padding (8px) and checkboxes align
- Rolling and provider icons moved from inline text flow to a right-
  aligned sibling span in the outer flex row (always at line end)
- paddingRight: 30px when weatherEnabled to prevent temperature overlay
  from overlapping task text

v1.111.3
---
 package.json                     |  2 +-
 src/components/GridTaskBlock.tsx | 55 +++++++++++++-------------------
 2 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index c2ff4e9..7b6a91f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.111.2",
+  "version": "1.111.3",
   "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 d2e8fe3..a5cdcc8 100644
--- a/src/components/GridTaskBlock.tsx
+++ b/src/components/GridTaskBlock.tsx
@@ -267,10 +267,10 @@ export function GridTaskBlock({
                     const stageColor = task.kanbanStage ? kanbanStages.find(s => s.id === task.kanbanStage)?.color : null;
                     if (stageColor) return `4px solid ${stageColor}`;
                     if (task.project?.color) return `4px solid ${task.project.color}`;
-                    return (isNotesOpen || isSubTasksOpen || isResizing) ? `1px solid ${darkMode ? "#404040" : "#e0e0e0"}` : "none";
+                    return `4px solid transparent`;
                 })(),
                 borderRadius: (isNotesOpen || isSubTasksOpen || isResizing) ? "4px" : "0",
-                padding: (task.kanbanStage && kanbanStages.some(s => s.id === task.kanbanStage)) || task.project?.color ? "2px 4px 2px 8px" : "2px 4px",
+                padding: weatherEnabled ? "2px 30px 2px 8px" : "2px 4px 2px 8px",
                 boxShadow: (isNotesOpen || isSubTasksOpen || isResizing) ? "0 1px 3px rgba(0,0,0,0.05)" : "none",
                 display: "flex",
                 flexDirection: "column",
@@ -496,50 +496,41 @@ export function GridTaskBlock({
                                     </svg>
                                 </button>
                             )}
-                            {/* Rolling indicator */}
-                            {task.isRolling && !task.completed && (
-                                <span
-                                    title="Auto-rolling task"
-                                    style={{
-                                        display: "inline-flex",
-                                        alignItems: "center",
-                                        padding: "1px 3px",
-                                        color: "var(--weekly-teal, #009a9a)",
-                                        marginLeft: "3px",
-                                        flexShrink: 0,
-                                    }}
-                                >
+                        </span>
+                    </span>
+                )}
+                {editingTaskId !== task.id && (() => {
+                    const rolling = task.isRolling && !task.completed;
+                    const provider = task.externalProvider || (task.externalId?.startsWith("synology::") ? "synology" : null);
+                    if (!rolling && !provider) return null;
+                    const iconMap: Record<string, { icon: any; color: string; label: string }> = {
+                        google: { icon: faGoogle, color: "#4285F4", label: "Google" },
+                        outlook: { icon: faMicrosoft, color: "#0078D4", label: "Microsoft" },
+                        apple: { icon: faApple, color: "#555", label: "Apple" },
+                        synology: { icon: faServer, color: "#007AFF", label: "Synology" },
+                    };
+                    return (
+                        <span style={{ display: "flex", alignItems: "flex-start", gap: "3px", flexShrink: 0, paddingTop: "2px" }}>
+                            {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">
                                         <polyline points="23 4 23 10 17 10" />
                                         <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
                                     </svg>
                                 </span>
                             )}
-                            {(() => {
-                                const provider = task.externalProvider
-                                    || (task.externalId?.startsWith("synology::") ? "synology" : null);
-                                if (!provider) return null;
-                                const iconMap: Record<string, { icon: any; color: string; label: string }> = {
-                                    google: { icon: faGoogle, color: "#4285F4", label: "Google" },
-                                    outlook: { icon: faMicrosoft, color: "#0078D4", label: "Microsoft" },
-                                    apple: { icon: faApple, color: "#555", label: "Apple" },
-                                    synology: { icon: faServer, color: "#007AFF", label: "Synology" },
-                                };
+                            {provider && (() => {
                                 const info = iconMap[provider];
                                 if (!info) return null;
                                 return (
-                                    <span
-                                        className="flex-shrink-0"
-                                        aria-label={`Synced with ${info.label}`}
-                                        style={{ display: "inline-flex", alignItems: "center", opacity: 0.55, marginLeft: "3px" }}
-                                    >
+                                    <span className="flex-shrink-0" aria-label={`Synced with ${info.label}`} style={{ display: "inline-flex", alignItems: "center", opacity: 0.55 }}>
                                         <FontAwesomeIcon icon={info.icon} aria-hidden="true" style={{ width: 10, height: 10, color: info.color }} />
                                     </span>
                                 );
                             })()}
                         </span>
-                    </span>
-                )}
+                    );
+                })()}
             </div>
 
             <div