From 6409dd89083714e2fc24b6c39ce4c020e965af9f Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Sun, 15 Mar 2026 09:13:35 +0100
Subject: [PATCH] fix: date vertical offset scales with headline font size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Compute vertical offset relative to the weekday headline font size
instead of the date's own small font. Top shifts up 55%, center 25%,
bottom stays at baseline — giving visible, proportional alignment.

v1.34.4

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

diff --git a/package.json b/package.json
index a5ddc93..bb350e6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.34.3",
+  "version": "1.34.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/WeeklyView.tsx b/src/components/WeeklyView.tsx
index 27ede0e..d424751 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -6420,37 +6420,42 @@ export default function WeeklyView() {
                                             gap: profile.dateAlignment === "tight" ? "2px" : (profile.dayHeaderGap || "0.35em"),
                                         }}
                                     >
-                                        {activeDateLayout === "left" && (
-                                            <span className="weekly-day-date" style={{
-                                                flexShrink: 0,
-                                                marginBottom: 0,
-                                                position: "relative",
-                                                top: profile.dateVerticalAlign === "top" ? "-0.35em" : profile.dateVerticalAlign === "bottom" ? "0.1em" : "-0.1em",
-                                            }}>
-                                                {formatDateHeader(date, language)}
-                                            </span>
-                                        )}
-                                        <h3
-                                            className={`weekly-day-name ${isSameDay(date, new Date()) ? "is-today" : ""}`}
-                                            style={{ marginBottom: 0, flexShrink: 0 }}
-                                        >
-                                            {getDayName(date, language, weekdayFormat, customWeekdayNames, weekStartDay, weekdayCase)}
-                                        </h3>
-                                        {(activeDateLayout === "right" ||
-                                            activeDateLayout === "above" ||
-                                            activeDateLayout === "below" ||
-                                            activeDateLayout === undefined) && (
-                                                <span className="weekly-day-date" style={{
-                                                    flexShrink: 0,
-                                                    marginBottom: (activeDateLayout === "above" || activeDateLayout === "below") ? undefined : 0,
-                                                    ...(activeDateLayout !== "above" && activeDateLayout !== "below" ? {
-                                                        position: "relative" as const,
-                                                        top: profile.dateVerticalAlign === "top" ? "-0.35em" : profile.dateVerticalAlign === "bottom" ? "0.1em" : "-0.1em",
-                                                    } : {}),
-                                                }}>
-                                                    {formatDateHeader(date, language)}
-                                                </span>
-                                            )}
+                                        {(() => {
+                                            // Compute date vertical offset relative to weekday font size
+                                            const isHorizontal = activeDateLayout === "left" || activeDateLayout === "right" || activeDateLayout === undefined;
+                                            const headlineSizePx = parseFloat(profile.headlineFontSize || "1.25rem") * (String(profile.headlineFontSize || "").includes("px") ? 1 : 16);
+                                            const dateOffset = !isHorizontal ? undefined
+                                                : profile.dateVerticalAlign === "top" ? `${-headlineSizePx * 0.55}px`
+                                                : profile.dateVerticalAlign === "bottom" ? "0px"
+                                                : `${-headlineSizePx * 0.25}px`; // center
+                                            const dateStyle = isHorizontal ? {
+                                                flexShrink: 0 as const, marginBottom: 0,
+                                                position: "relative" as const, top: dateOffset,
+                                            } : { flexShrink: 0 as const };
+                                            return (
+                                                <>
+                                                    {activeDateLayout === "left" && (
+                                                        <span className="weekly-day-date" style={dateStyle}>
+                                                            {formatDateHeader(date, language)}
+                                                        </span>
+                                                    )}
+                                                    <h3
+                                                        className={`weekly-day-name ${isSameDay(date, new Date()) ? "is-today" : ""}`}
+                                                        style={{ marginBottom: 0, flexShrink: 0 }}
+                                                    >
+                                                        {getDayName(date, language, weekdayFormat, customWeekdayNames, weekStartDay, weekdayCase)}
+                                                    </h3>
+                                                    {(activeDateLayout === "right" ||
+                                                        activeDateLayout === "above" ||
+                                                        activeDateLayout === "below" ||
+                                                        activeDateLayout === undefined) && (
+                                                            <span className="weekly-day-date" style={dateStyle}>
+                                                                {formatDateHeader(date, language)}
+                                                            </span>
+                                                        )}
+                                                </>
+                                            );
+                                        })()}
                                     </div>
                                 </header>