From 5ee99d6d2f4069e662c9ca1475d9512af68e97e8 Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Wed, 1 Apr 2026 20:31:20 +0200
Subject: [PATCH] fix: list-view day header overlapping tasks on mobile

- 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
---
 package.json        |  2 +-
 src/app/globals.css | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 57af515..03d8495 100644
--- a/package.json
+++ b/package.json
@@ -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": {
diff --git a/src/app/globals.css b/src/app/globals.css
index 3065be7..8a97bb7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -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;