Skip to content

Commit d55fdc2

Browse files
renemadsenclaude
andcommitted
fix(calendar): override .mtx-grid-layout overflow too for sticky header
Previous fix only overrode .mat-table-container. The DOM has more scrolling layers above it — .mtx-grid-main and .mtx-grid-content both use the .mtx-grid-layout class which sets overflow: auto (node_modules/@ng-matero/extensions/grid/grid.scss:158). Sticky positioning resolves to the closest scrolling ancestor; with those intermediate layers still scrolling, the header stuck to one of them instead of the outer .week-grid-wrapper that the user actually scrolls. Override both .mtx-grid-layout and .mat-table-container to overflow:visible so sticky resolves all the way out to the wrapper. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 4b4d62d commit d55fdc2

1 file changed

Lines changed: 11 additions & 6 deletions

File tree

eform-client/src/app/plugins/modules/backend-configuration-pn/modules/calendar/components/calendar-week-grid/calendar-week-grid.component.scss

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -107,12 +107,17 @@
107107
// Sticky day-of-week header so the date strip ("man. 27/04" etc.) stays
108108
// pinned when scrolling down through the time grid.
109109
//
110-
// mtx-grid wraps the <mat-table> in a `.mat-table-container` that has
111-
// `overflow: auto` (see node_modules/@ng-matero/extensions/grid/grid.scss).
112-
// That inner scroll container hijacks sticky positioning — the header
113-
// would stick to the inner container instead of the outer
114-
// `.week-grid-wrapper`. Override to `visible` so sticky resolves to the
115-
// outer scroll container that the user actually scrolls.
110+
// mtx-grid stacks several scrolling/clipping containers between
111+
// <mat-table> and the outer `.week-grid-wrapper` (see
112+
// node_modules/@ng-matero/extensions/grid/grid.scss):
113+
// .mtx-grid-layout — overflow: auto (line 158 — used by
114+
// both .mtx-grid-main and .mtx-grid-content)
115+
// .mat-table-container — overflow: auto (line 43)
116+
// Each is a scrolling box that captures sticky positioning, so sticky
117+
// resolves to whichever is closest — none of which are the wrapper the
118+
// user actually scrolls. Override them all to `visible` so the header
119+
// sticks to `.week-grid-wrapper` instead.
120+
.mtx-grid-layout,
116121
.mat-table-container {
117122
overflow: visible !important;
118123
}

0 commit comments

Comments
 (0)