mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: side-nav-right visibility and mobile text input color

Browse Source 
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>
This commit is contained in:
mARTin 2026-03-14 19:56:22 +01:00
parent 0f214040ff
commit 892d729e53
3 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "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", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

9
src/app/globals.css
View File

@ -2151,13 +2151,22 @@ h3 {
--weekly-settings-toggle-active-text: #ffffff; --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 input,
.weekly-container.dark-mode textarea { .weekly-container.dark-mode textarea {
color: #ffffff; color: #ffffff;
-webkit-text-fill-color: #ffffff;
} }
.weekly-container.dark-mode .weekly-task-input input { .weekly-container.dark-mode .weekly-task-input input {
color: #ffffff; color: #ffffff;
-webkit-text-fill-color: #ffffff;
} }
.weekly-container.dark-mode .weekly-task-input input::placeholder { .weekly-container.dark-mode .weekly-task-input input::placeholder {

43
src/components/WeeklyView.tsx
View File

@ -6346,7 +6346,8 @@ export default function WeeklyView() {
})()} })()}
{/* Main Grid with Time Column */} {/* 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`, maxHeight: `${(endHour - startHour) * (60 / cellDuration) * getSlotHeight(cellDuration) + measuredHeaderHeight}px`,
} : undefined}> } : undefined}>
{/* Time Column */} {/* Time Column */}
@ -6984,26 +6985,26 @@ export default function WeeklyView() {
})} })}
</main> </main>
{/* Right Navigation Arrows (now aligned with headers) */} </div>
<div {/* Right Navigation Arrows (outside scroll wrapper, fixed to right edge) */}
className="side-nav side-nav-right" <div
style={{ className="side-nav side-nav-right"
height: `${getHeaderHeight(cellDuration)}px`, style={{
maxHeight: `${getHeaderHeight(cellDuration)}px`, height: `${measuredHeaderHeight}px`,
position: 'absolute', position: 'absolute',
top: 0, top: 0,
right: 0, right: 0,
width: '30px', width: '30px',
zIndex: 40 zIndex: 50
}} }}
> >
<button onClick={goToNextDay} title="Next Day" className="side-nav-btn"> <button onClick={goToNextDay} title="Next Day" className="side-nav-btn">
<ChevronRight size={16} /> <ChevronRight size={16} />
</button> </button>
<button onClick={goToNextWeek} title="Next Week" className="side-nav-btn"> <button onClick={goToNextWeek} title="Next Week" className="side-nav-btn">
<ChevronsRight size={16} /> <ChevronsRight size={16} />
</button> </button>
</div> </div>
</div>} </div>}
{/* All-Day Events Section (below position) */} {/* All-Day Events Section (below position) */}