From a20f6673ec8b50705fc59fe293298f5779527ddd Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Tue, 17 Mar 2026 11:43:26 +0100
Subject: [PATCH] fix: declutter iPad/tablet header by hiding secondary
 controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On tablet (≤1024px), hide days-to-show, time range, slot duration,
and goal/quote from header. Move days and slot controls into the
overflow menu. Only view switcher icons + KW/year + navigation remain
in the header bar.

v1.43.2
---
 package.json                  |  2 +-
 src/components/WeeklyView.tsx | 43 ++++++++++++++++++++++++++++-------
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 18234ec..bcbf26f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.43.1",
+  "version": "1.43.2",
   "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 7e60be3..99eb66d 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -5767,9 +5767,9 @@ export default function WeeklyView() {
                         </button>
                     </div>
 
-                    {/* Days to Show */}
+                    {/* Days to Show — desktop only (available in sidebar on tablet) */}
                     <div
-                        className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
+                        className="header-desktop-only items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
                         title="Days to show"
                     >
                         <LayoutGrid size={16} className="text-gray-500 mr-1" />
@@ -5788,10 +5788,10 @@ export default function WeeklyView() {
                         ))}
                     </div>
 
-                    {/* Time Range */}
+                    {/* Time Range — desktop only (available in sidebar on tablet) */}
                     {showTimeGrid && (
                         <div
-                            className="flex items-center gap-2 text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 rounded p-1 px-2"
+                            className="header-desktop-only items-center gap-2 text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 rounded p-1 px-2"
                             title="Visible Hours"
                         >
                             <Clock size={16} className="text-gray-500" />
@@ -5831,10 +5831,10 @@ export default function WeeklyView() {
                         </div>
                     )}
 
-                    {/* Slot Duration */}
+                    {/* Slot Duration — desktop only (available in sidebar on tablet) */}
                     {showTimeGrid && (
                         <div
-                            className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
+                            className="header-desktop-only items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
                             title="Slot Duration"
                         >
                             <Clock size={16} className="text-gray-500 mr-1" />
@@ -5927,8 +5927,8 @@ export default function WeeklyView() {
                         </div>
                     </div>
 
-                    {/* Goal */}
-                    <div className="flex items-center text-sm">
+                    {/* Goal — hidden on tablet to save space */}
+                    <div className="header-desktop-only items-center text-sm">
                         {syncError ? (
                             <div className="flex items-center gap-1 text-red-500 mr-2" title={syncError}>
                                 <AlertCircle size={14} />
@@ -6076,6 +6076,33 @@ export default function WeeklyView() {
                                     <button onClick={() => { setShowFocusMode(true); setShowHeaderMore(false); }}><Zap size={16} /> <span>{language === "de" ? "Fokus" : "Focus"}</span></button>
                                     <button onClick={() => { setDarkMode(!darkMode); setShowHeaderMore(false); }}>{darkMode ? <Sun size={16} /> : <Moon size={16} />} <span>{darkMode ? "Light" : "Dark"}</span></button>
                                     <button onClick={() => { setShowSettings(true); setShowHeaderMore(false); }}><FolderPlus size={16} /> <span>{language === "de" ? "Neues Projekt" : "New Project"}</span></button>
+                                    <div style={{ borderTop: "1px solid var(--border-color, #e5e7eb)", margin: "2px 0" }} />
+                                    <div style={{ padding: "6px 12px", display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }}>
+                                        <span style={{ fontSize: "12px", color: "#888", marginRight: "4px" }}>{language === "de" ? "Tage" : "Days"}:</span>
+                                        {[1, 2, 3, 5, 7].map((num) => (
+                                            <button
+                                                key={num}
+                                                onClick={() => { setViewDays(num); savedViewDaysRef.current = num; saveSetting("viewDays", num); }}
+                                                style={{ padding: "2px 8px", fontSize: "12px", borderRadius: "4px", border: "none", cursor: "pointer", fontWeight: viewDays === num ? 700 : 400, background: viewDays === num ? "var(--bg-secondary, #e5e7eb)" : "transparent", color: "inherit" }}
+                                            >
+                                                {num}
+                                            </button>
+                                        ))}
+                                    </div>
+                                    {showTimeGrid && (
+                                        <div style={{ padding: "6px 12px", display: "flex", alignItems: "center", gap: "6px" }}>
+                                            <span style={{ fontSize: "12px", color: "#888", marginRight: "4px" }}>{language === "de" ? "Slot" : "Slot"}:</span>
+                                            {[15, 30, 60].map((duration) => (
+                                                <button
+                                                    key={duration}
+                                                    onClick={() => { setCellDuration(duration as CellDuration); saveSetting("cellDuration", duration); }}
+                                                    style={{ padding: "2px 8px", fontSize: "12px", borderRadius: "4px", border: "none", cursor: "pointer", fontWeight: cellDuration === duration ? 700 : 400, background: cellDuration === duration ? "var(--bg-secondary, #e5e7eb)" : "transparent", color: "inherit" }}
+                                                >
+                                                    {duration}m
+                                                </button>
+                                            ))}
+                                        </div>
+                                    )}
                                 </div>
                             </>
                         )}