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

fix: list-view day header overlapping tasks on mobile

Browse Source 
- Added solid background to .list-view .weekly-day-header so tasks
  don't bleed through the transparent sticky header while scrolling
- On mobile, offset sticky top by 48px + safe-area-inset to sit
  below the mobile header bar instead of overlapping it

v1.81.6
This commit is contained in:
mARTin 2026-04-01 20:31:20 +02:00
parent 3657fb284f
commit 5ee99d6d2f
2 changed files with 18 additions and 1 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",
"version": "1.81.5",
"version": "1.81.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": {

17
src/app/globals.css
View File

@ -3469,6 +3469,23 @@ h3 {
border-left-width: 0px;
}
/* List view: give sticky day headers a solid background so tasks don't bleed through */
.weekly-container.list-view .weekly-day-header {
background-color: var(--weekly-bg, #fff);
border-bottom: 1px solid var(--weekly-border, #e0e0e0);
}
.weekly-container.dark-mode.list-view .weekly-day-header {
background-color: var(--weekly-bg, #111);
border-bottom-color: var(--weekly-border, #333);
}
/* On mobile, list-view day header must clear the sticky mobile header bar (~48px) */
@media (max-width: 768px) {
.weekly-container.list-view .weekly-day-header {
top: calc(48px + env(safe-area-inset-top, 0px));
}
}
.weekly-container.list-view .time-slot.hour-start {
margin-left: 20px;
border-right-width: 20px;