Calendar grid shifted

[Sz-Dave]

Everything is working, but in all views the calendar grid is shifted downwards for some reason. For example, an event that is starting at 12 appears to start about 15 minutes earlier. All the data of the event is correctly read by the plugin and when I try to edit it, it shows the correct start and end times. Here is how an example event looks, that supposed to start at 12 and finish at 13: I tried changing the theme or disabling my snippets to see if it resolves things, but it did not. Any ideas why is this happening?

[matyasLevinsky]

Hello, I can't answer why that started occurring but can help you with a snippet that could fix it: Alignment between the lines, event-boxes and hour numbers, is governed by two properties of .gcal-timeline.svelte-1b16v0k and in my case this fixed the alignment issue:

.gcal-timeline.svelte-1b16v0k {
    position: relative;
    display: flex;
    flex-direction: row;
    padding-top: 0px !important; /* So lines will match time */
    flex-shrink: 1000;
    min-height: 0;
    margin: -199.2px 0px 0px 0px !important; /* was -208.167px 0px 0px 0px */
}

Put this into a Css snippet and it should fix your issue. More info in my issue: Here

[Sz-Dave]

Thanks for the answer, the padding-top adjustment indeed fixed the line alignment, but for me the margin had to be set to be around 10 px in order to align the numbers with the lines, with your values my whole calendar with the lines and events (aligned) was altogether shifted upwards by a huge margin. Even though 10 px upon looking at it seemed to be the number centerline alignment, my eyes prefered 8 px, so I settled on that. So my snippet ended up looking like this:

.gcal-timeline.svelte-1b16v0k {
    position: relative;
    display: flex;
    flex-direction: row;
    padding-top: 0px !important; /* So lines will match time */
    flex-shrink: 1000;
    min-height: 0;
    margin: 8px 0px 0px 0px !important; /* was -208.167px 0px 0px 0px */
}