Skip to content

Commit cd637cb

Browse files
renemadsenclaude
andcommitted
fix(calendar): also override mtx-grid host overflow for sticky header
The day-of-week header still scrolled with content because mtx-grid (the host element of .calendar-grid) has overflow: hidden, which establishes its own scroll-containment context and captures `position: sticky` resolution before the actual scrolling .week-grid-wrapper. Verified in the browser by walking the scroll-ancestor chain. Adding `&` to the existing overflow-override block extends `visible` to mtx-grid itself, so sticky now resolves all the way out to the wrapper that the user actually scrolls. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent d55fdc2 commit cd637cb

1 file changed

Lines changed: 10 additions & 7 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: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -110,13 +110,16 @@
110110
// mtx-grid stacks several scrolling/clipping containers between
111111
// <mat-table> and the outer `.week-grid-wrapper` (see
112112
// 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.
113+
// mtx-grid — overflow: hidden (line 12)
114+
// .mtx-grid-layout — overflow: auto (line 158 — used by both
115+
// .mtx-grid-main and .mtx-grid-content)
116+
// .mat-table-container — overflow: auto (line 43)
117+
// Each is a scrolling/clipping box that captures sticky positioning, so
118+
// sticky resolves to whichever is closest — none of which are the
119+
// wrapper the user actually scrolls. Override them all (including mtx-grid
120+
// itself, hence `&`) to `visible` so the header sticks to
121+
// `.week-grid-wrapper` instead.
122+
&,
120123
.mtx-grid-layout,
121124
.mat-table-container {
122125
overflow: visible !important;

0 commit comments

Comments
 (0)