From 892d729e53d8923392ea633cfcfb59fbc5e27eb8 Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Sat, 14 Mar 2026 19:56:22 +0100
Subject: [PATCH] fix: side-nav-right visibility and mobile text input color

Move right navigation arrows outside scrollable time-grid-wrapper so
they remain visible on hover. Add explicit -webkit-text-fill-color for
all inputs/textareas to fix invisible text on iOS Safari.

v1.33.6

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json                  |  2 +-
 src/app/globals.css           |  9 ++++++++
 src/components/WeeklyView.tsx | 43 ++++++++++++++++++-----------------
 3 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 8d6b7d8..c91baaf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.33.5",
+  "version": "1.33.6",
   "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/app/globals.css b/src/app/globals.css
index 08dfb79..1431119 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2151,13 +2151,22 @@ h3 {
   --weekly-settings-toggle-active-text: #ffffff;
 }
 
+/* Ensure inputs have explicit color for mobile Safari */
+.weekly-container input,
+.weekly-container textarea {
+  color: var(--weekly-text, #333333);
+  -webkit-text-fill-color: var(--weekly-text, #333333);
+}
+
 .weekly-container.dark-mode input,
 .weekly-container.dark-mode textarea {
   color: #ffffff;
+  -webkit-text-fill-color: #ffffff;
 }
 
 .weekly-container.dark-mode .weekly-task-input input {
   color: #ffffff;
+  -webkit-text-fill-color: #ffffff;
 }
 
 .weekly-container.dark-mode .weekly-task-input input::placeholder {
diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index 58b9b9a..c9d0789 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -6346,7 +6346,8 @@ export default function WeeklyView() {
             })()}
 
             {/* Main Grid with Time Column */}
-            {viewStyle !== "kanban" && <div className="time-grid-wrapper" ref={timeGridWrapperRef} style={showTimeGrid ? {
+            {viewStyle !== "kanban" && <div style={{ position: "relative" }}>
+            <div className="time-grid-wrapper" ref={timeGridWrapperRef} style={showTimeGrid ? {
                 maxHeight: `${(endHour - startHour) * (60 / cellDuration) * getSlotHeight(cellDuration) + measuredHeaderHeight}px`,
             } : undefined}>
                 {/* Time Column */}
@@ -6984,26 +6985,26 @@ export default function WeeklyView() {
                     })}
                 </main>
 
-                {/* Right Navigation Arrows (now aligned with headers) */}
-                <div 
-                  className="side-nav side-nav-right" 
-                  style={{ 
-                    height: `${getHeaderHeight(cellDuration)}px`,
-                    maxHeight: `${getHeaderHeight(cellDuration)}px`,
-                    position: 'absolute',
-                    top: 0,
-                    right: 0,
-                    width: '30px',
-                    zIndex: 40
-                  }}
-                >
-                    <button onClick={goToNextDay} title="Next Day" className="side-nav-btn">
-                        <ChevronRight size={16} />
-                    </button>
-                    <button onClick={goToNextWeek} title="Next Week" className="side-nav-btn">
-                        <ChevronsRight size={16} />
-                    </button>
-                </div>
+            </div>
+            {/* Right Navigation Arrows (outside scroll wrapper, fixed to right edge) */}
+            <div
+              className="side-nav side-nav-right"
+              style={{
+                height: `${measuredHeaderHeight}px`,
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                width: '30px',
+                zIndex: 50
+              }}
+            >
+                <button onClick={goToNextDay} title="Next Day" className="side-nav-btn">
+                    <ChevronRight size={16} />
+                </button>
+                <button onClick={goToNextWeek} title="Next Week" className="side-nav-btn">
+                    <ChevronsRight size={16} />
+                </button>
+            </div>
             </div>}
 
             {/* All-Day Events Section (below position) */}