From 58de23a18f0c7dd064073eec8980d3c6e9d537dd Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Fri, 13 Mar 2026 15:53:16 +0100
Subject: [PATCH] Convert header display settings to dropdown (v1.33.1)

---
 package.json                  |  2 +-
 src/components/WeeklyView.tsx | 58 +++++++++--------------------------
 2 files changed, 15 insertions(+), 45 deletions(-)

diff --git a/package.json b/package.json
index 394bada..030aaa8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.33.0",
+  "version": "1.33.1",
   "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 28c23a9..c737185 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -10863,52 +10863,22 @@ function SettingsSidebar({
                                 <label style={{ fontSize: "0.85rem", fontWeight: 600, color: "var(--weekly-settings-label)" }}>
                                     {t.headerDisplay}
                                 </label>
-                                <div className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1 mt-1" style={{ width: "fit-content" }}>
-                                    <button
-                                        onClick={() => {
-                                            setProfile({ ...profile, headerDisplay: "kw" });
-                                            saveSetting("headerDisplay", "kw");
+                                <div className="mt-1">
+                                    <select
+                                        value={profile.headerDisplay || "kw"}
+                                        onChange={(e) => {
+                                            const val = e.target.value as any;
+                                            setProfile({ ...profile, headerDisplay: val });
+                                            saveSetting("headerDisplay", val);
                                         }}
-                                        className={`px-4 py-2 text-sm rounded transition-colors ${(profile.headerDisplay || "kw") === "kw" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
+                                        className="weekly-input w-full p-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded"
                                     >
-                                        {t.headerDisplayKW}
-                                    </button>
-                                    <button
-                                        onClick={() => {
-                                            setProfile({ ...profile, headerDisplay: "month" });
-                                            saveSetting("headerDisplay", "month");
-                                        }}
-                                        className={`px-4 py-2 text-sm rounded transition-colors ${profile.headerDisplay === "month" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
-                                    >
-                                        {t.headerDisplayMonth}
-                                    </button>
-                                    <button
-                                        onClick={() => {
-                                            setProfile({ ...profile, headerDisplay: "month_year" });
-                                            saveSetting("headerDisplay", "month_year");
-                                        }}
-                                        className={`px-4 py-2 text-sm rounded transition-colors ${profile.headerDisplay === "month_year" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
-                                    >
-                                        {t.headerDisplayMonthYear}
-                                    </button>
-                                    <button
-                                        onClick={() => {
-                                            setProfile({ ...profile, headerDisplay: "date" });
-                                            saveSetting("headerDisplay", "date");
-                                        }}
-                                        className={`px-4 py-2 text-sm rounded transition-colors ${profile.headerDisplay === "date" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
-                                    >
-                                        {t.headerDisplayDate}
-                                    </button>
-                                    <button
-                                        onClick={() => {
-                                            setProfile({ ...profile, headerDisplay: "custom" });
-                                            saveSetting("headerDisplay", "custom");
-                                        }}
-                                        className={`px-4 py-2 text-sm rounded transition-colors ${profile.headerDisplay === "custom" ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
-                                    >
-                                        {t.headerDisplayCustom}
-                                    </button>
+                                        <option value="kw">{t.headerDisplayKW}</option>
+                                        <option value="month">{t.headerDisplayMonth}</option>
+                                        <option value="month_year">{t.headerDisplayMonthYear}</option>
+                                        <option value="date">{t.headerDisplayDate}</option>
+                                        <option value="custom">{t.headerDisplayCustom}</option>
+                                    </select>
                                 </div>
                                 {profile.headerDisplay === "custom" && (
                                     <div className="mt-2">