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", "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", "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": {

23
src/app/globals.css
View File

@ -4069,7 +4069,8 @@ h3 {
background: transparent; background: transparent;
} }
/* Disable independent scrolling on all inner grid containers */ /* Disable independent scrolling on all inner grid containers (desktop only) */
@media (min-width: 769px) {
.time-grid-on .weekly-days-grid, .time-grid-on .weekly-days-grid,
.time-grid-on .weekly-day-column, .time-grid-on .weekly-day-column,
.time-grid-on .time-slots-container, .time-grid-on .time-slots-container,
@ -4080,6 +4081,26 @@ h3 {
max-height: none !important; max-height: none !important;
min-height: 100% !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 */ /* Ensure no rogue scrollbars appear and hide webskit ones */
.time-grid-on .weekly-days-grid::-webkit-scrollbar, .time-grid-on .weekly-days-grid::-webkit-scrollbar,