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

fix: restore sticky weekday headers on mobile

Browse Source 
The global overflow-y:visible rule for time-grid-on was overriding
the mobile overflow-y:auto on .weekly-days-grid, which broke
position:sticky on day headers. Wrap desktop overflow rules in a
min-width media query and keep mobile scroll container intact.

v1.37.4
This commit is contained in:
mARTin 2026-03-16 22:35:37 +01:00
parent 0fa2893e10
commit 2ad55fe1bd
2 changed files with 32 additions and 11 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.37.3",
"version": "1.37.4",
"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": {

33
src/app/globals.css
View File

@ -4069,16 +4069,37 @@ h3 {
background: transparent;
}
/* Disable independent scrolling on all inner grid containers */
.time-grid-on .weekly-days-grid,
.time-grid-on .weekly-day-column,
.time-grid-on .time-slots-container,
.time-grid-on .time-column-slots,
.time-grid-on .time-column {
/* Disable independent scrolling on all inner grid containers (desktop only) */
@media (min-width: 769px) {
.time-grid-on .weekly-days-grid,
.time-grid-on .weekly-day-column,
.time-grid-on .time-slots-container,
.time-grid-on .time-column-slots,
.time-grid-on .time-column {
overflow-y: visible !important;
overflow-x: visible !important;
max-height: none !important;
min-height: 100% !important;
}
}
/* Mobile: allow scroll on grid but keep day columns visible for sticky headers */
@media (max-width: 768px) {
.time-grid-on .weekly-days-grid {
overflow-y: auto !important;
overflow-x: hidden !important;
}
.time-grid-on .weekly-day-column {
overflow-y: visible !important;
overflow-x: visible !important;
max-height: none !important;
}
.time-grid-on .time-slots-container,
.time-grid-on .time-column-slots,
.time-grid-on .time-column {
overflow-y: visible !important;
overflow-x: visible !important;
max-height: none !important;
}
}
/* Ensure no rogue scrollbars appear and hide webskit ones */