diff --git a/src/v2/core/HeaderDrawerManager.ts b/src/v2/core/HeaderDrawerManager.ts index 8db94d6..aef390a 100644 --- a/src/v2/core/HeaderDrawerManager.ts +++ b/src/v2/core/HeaderDrawerManager.ts @@ -1,7 +1,7 @@ export class HeaderDrawerManager { private drawer!: HTMLElement; private expanded = false; - private readonly expandedHeight = 24; + private readonly expandedHeight = 25; private readonly duration = 200; init(container: HTMLElement): void { diff --git a/wwwroot/css/v2/calendar-v2-layout.css b/wwwroot/css/v2/calendar-v2-layout.css index 42e303e..7edd7ab 100644 --- a/wwwroot/css/v2/calendar-v2-layout.css +++ b/wwwroot/css/v2/calendar-v2-layout.css @@ -74,11 +74,12 @@ swp-header-spacer { swp-header-drawer { display: grid; - grid-template-columns: repeat(var(--grid-columns), minmax(var(--day-column-min-width), 1fr)); - min-width: calc(var(--grid-columns) * var(--day-column-min-width)); + grid-template-columns: subgrid; + grid-column: 1 / -1; + grid-row: 2; grid-auto-rows: 28px; gap: 2px 0; - min-height: 0; + height: 0; overflow: hidden; background: var(--color-background-alt); border-bottom: 1px solid var(--color-border); @@ -124,7 +125,15 @@ swp-grid-container { /* Viewport/Track for slide animation */ swp-header-viewport { - overflow: hidden; + display: grid; + grid-template-columns: repeat(var(--grid-columns), minmax(var(--day-column-min-width), 1fr)); + grid-template-rows: auto auto; + min-width: calc(var(--grid-columns) * var(--day-column-min-width)); + overflow-y: scroll; + overflow-x: hidden; + + &::-webkit-scrollbar { background: transparent; } + &::-webkit-scrollbar-thumb { background: transparent; } } swp-content-viewport { @@ -133,9 +142,10 @@ swp-content-viewport { } swp-header-track { - display: flex; - - > swp-calendar-header { flex: 0 0 100%; } + display: grid; + grid-template-columns: subgrid; + grid-column: 1 / -1; + grid-row: 1; } swp-content-track { @@ -151,15 +161,10 @@ swp-content-track { /* Header */ swp-calendar-header { display: grid; - grid-template-columns: repeat(var(--grid-columns), minmax(var(--day-column-min-width), 1fr)); - min-width: calc(var(--grid-columns) * var(--day-column-min-width)); + grid-template-columns: subgrid; + grid-column: 1 / -1; grid-auto-rows: auto; background: var(--color-surface); - overflow-y: scroll; - overflow-x: hidden; - - &::-webkit-scrollbar { background: transparent; } - &::-webkit-scrollbar-thumb { background: transparent; } &[data-levels="date"] > swp-day-header { grid-row: 1; }