mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: inline project icons so multi-line text wraps around them

Browse Source 
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>
This commit is contained in:
mARTin 2026-03-23 13:58:43 +01:00
parent b6f5ba42ed
commit 6fc0ccef74
3 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "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", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

14
src/components/GridTaskBlock.tsx
View File

@ -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" }}> <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 found = allIcons.find(i => i.name === task.project!.icon);
const iconStyle = { marginRight: "4px", verticalAlign: "middle" } as const;
if (found) { if (found) {
return found.type === "fa" return found.type === "fa"
? <FontAwesomeIcon icon={found.icon as IconDefinition} style={{ fontSize: "11px", marginRight: "4px", color: task.project!.color || "#888", 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={{ marginRight: "3px", flexShrink: 0 }} />; : <MdiIcon path={found.icon as string} size={0.5} color={task.project!.color || "#888"} style={{ ...iconStyle, display: "inline-block" }} />;
} }
return task.project!.icon return task.project!.icon
? <span style={{ fontSize: "11px", marginRight: "3px", flexShrink: 0 }}>{task.project!.icon}</span> ? <span style={{ fontSize: "11px", ...iconStyle }}>{task.project!.icon}</span>
: <FontAwesomeIcon icon={faFolder} style={{ fontSize: "11px", marginRight: "4px", color: task.project!.color || "#888", flexShrink: 0 }} />; : <FontAwesomeIcon icon={faFolder} style={{ fontSize: "11px", ...iconStyle, color: task.project!.color || "#888" }} />;
})()} })()}{task.title}</span>
<span style={{ marginRight: "4px" }}>{task.title}</span>
{/* Subtask indicator */} {/* Subtask indicator */}
{task.subTasks && task.subTasks.length > 0 && (() => { {task.subTasks && task.subTasks.length > 0 && (() => {
const completed = task.subTasks.filter(s => s.completed).length; const completed = task.subTasks.filter(s => s.completed).length;

10
src/components/WeeklyView.tsx
View File

@ -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 <span
style={{ style={{
whiteSpace: "pre-wrap", whiteSpace: "pre-wrap",
@ -9773,6 +9768,11 @@ function TaskItem({
flex: 1, 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} {task.title}
</span> </span>
{(() => { {(() => {