From 10aa9aabb5f21ef069da2983ee640723a2b030a3 Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Sun, 8 Mar 2026 10:41:53 +0100
Subject: [PATCH] feat: added Date Vertical Alignment setting and updated
 version to v1.17.0

---
 src/components/WeeklyView.tsx | 51 ++++++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index 29b25c4..c585201 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -279,6 +279,11 @@ const translations: Record<string, any> = {
         allDayBelow: "Below",
         newPasswordDesc: "Leave blank to keep current password.",
         dateAlignment: "Date Alignment",
+        dateVerticalAlign: "Date Vertical Alignment",
+        alignTop: "Top",
+        alignMiddle: "Middle",
+        alignBottom: "Bottom",
+        dateLayout: "Date Layout",
         alignmentLeft: "Left",
         alignmentCenter: "Center",
         alignmentRight: "Right",
@@ -374,6 +379,11 @@ const translations: Record<string, any> = {
         allDayBelow: "Unten",
         newPasswordDesc: "Leer lassen, um das aktuelle Passwort zu behalten.",
         dateAlignment: "Datums-Ausrichtung",
+        dateVerticalAlign: "Datums-Vertikalausrichtung",
+        alignTop: "Oben",
+        alignMiddle: "Mitte",
+        alignBottom: "Unten",
+        dateLayout: "Datumslayout",
         alignmentLeft: "Links",
         alignmentCenter: "Mitte",
         alignmentRight: "Rechts",
@@ -4890,7 +4900,7 @@ export default function WeeklyView() {
                                                 activeDateLayout === "above" ||
                                                     activeDateLayout === "below"
                                                     ? (profile.dateAlignment === "left" ? "flex-start" : profile.dateAlignment === "right" ? "flex-end" : "center")
-                                                    : "center",
+                                                    : (profile.dateVerticalAlign === "top" ? "flex-start" : profile.dateVerticalAlign === "bottom" ? "flex-end" : "center"),
                                             justifyContent:
                                                 profile.dateAlignment === "left"
                                                     ? "flex-start"
@@ -10248,6 +10258,45 @@ function SettingsSidebar({
                                             <option value="tight">{t.alignmentTight || "Tight"}</option>
                                         </select>
                                     </div>
+                                    <div>
+                                        <label
+                                            style={{
+                                                display: "block",
+                                                fontSize: "0.85rem",
+                                                fontWeight: 600,
+                                                color: "var(--weekly-settings-label)",
+                                                marginBottom: "8px",
+                                            }}
+                                        >
+                                            {t.dateVerticalAlign || "Date Vertical Alignment"}
+                                        </label>
+                                        <select
+                                            value={profile.dateVerticalAlign || "middle"}
+                                            onChange={(e) =>
+                                                setProfile({
+                                                    ...profile,
+                                                    dateVerticalAlign: e.target.value as
+                                                        | "top"
+                                                        | "middle"
+                                                        | "bottom",
+                                                })
+                                            }
+                                            className="weekly-input"
+                                            style={{
+                                                width: "100%",
+                                                padding: "8px",
+                                                fontSize: "0.9rem",
+                                                border: "1px solid var(--weekly-settings-input-border)",
+                                                borderRadius: "4px",
+                                                background: "var(--weekly-settings-input-bg)",
+                                                color: "var(--weekly-settings-text)",
+                                            }}
+                                        >
+                                            <option value="top">{t.alignTop || "Top"}</option>
+                                            <option value="middle">{t.alignMiddle || "Middle"}</option>
+                                            <option value="bottom">{t.alignBottom || "Bottom"}</option>
+                                        </select>
+                                    </div>
                                 </div>
 
                                 {/* Day Names */}