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

fix: vertically center icons, checkbox, and text in task rows

Browse Source 
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
This commit is contained in:
mARTin-B78 2026-05-11 15:43:14 +02:00
parent 4a5910779e
commit 0e189e53b3
2 changed files with 6 additions and 6 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.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", "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": {

10
src/components/GridTaskBlock.tsx
View File

@ -299,7 +299,7 @@ export function GridTaskBlock({
if (editingTaskId !== task.id) toggleTask(task.id); 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 ? ( {editingTaskId === task.id ? (
<form <form
onSubmit={(e) => { onSubmit={(e) => {
@ -329,7 +329,7 @@ export function GridTaskBlock({
<span <span
style={{ style={{
display: "flex", display: "flex",
alignItems: "flex-start", alignItems: "center",
gap: "3px", gap: "3px",
overflow: "visible", overflow: "visible",
whiteSpace: "pre-wrap", whiteSpace: "pre-wrap",
@ -342,7 +342,7 @@ export function GridTaskBlock({
}} }}
> >
{(showPriorityIcons || showProjectIcons) && ( {(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 && (() => { {showPriorityIcons && (() => {
const pb = getPriorityBadge(task, priorityStyle, 11); const pb = getPriorityBadge(task, priorityStyle, 11);
return pb ? ( return pb ? (
@ -380,7 +380,7 @@ export function GridTaskBlock({
onChange={(e) => { e.stopPropagation(); toggleTask(task.id); }} onChange={(e) => { e.stopPropagation(); toggleTask(task.id); }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="task-checkbox flex-shrink-0" 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" }}> <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" }, synology: { icon: faServer, color: "#007AFF", label: "Synology" },
}; };
return ( 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 && ( {rolling && (
<span title="Auto-rolling task" style={{ display: "inline-flex", alignItems: "center", color: "var(--weekly-teal, #009a9a)" }}> <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"> <svg viewBox="0 0 24 24" width="10" height="10" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">