Issue in Mobile + Menu Drawer

[AlexRoig]

Hi, found an issue on Vaadin 23.0.8. When we resize the screen size to make it mobile, when you open the side menu parts of the calendar header are visible over the menu drawer:

Tested on Safari and Chrome.

[aetasoul]

Correlated to #97?

Can you share the code to reproduce?

[AlexRoig]

Not really, I'm using AppLayout also but resize works fine and the problem is only observed in the smaller widths where AppLayout changes the design to 'mobile' and the menu gets hidden. When the menu is closed, everything's fine, but when you open it up the elements of FC merge into the menu

[AlexRoig]

Steps to reproduce:
1- Pick up a default project from start.vaadin.com
2- Add FC maven dependency
3- Replace the contents of HelloWorldView with the following:

package com.example.application.views.helloworld;

import com.example.application.views.MainLayout;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouteAlias;
import org.vaadin.stefan.fullcalendar.BusinessHours;
import org.vaadin.stefan.fullcalendar.CalendarViewImpl;
import org.vaadin.stefan.fullcalendar.FullCalendar;
import org.vaadin.stefan.fullcalendar.FullCalendarBuilder;

import java.time.DayOfWeek;
import java.time.LocalTime;

@PageTitle("Hello World")
@Route(value = "hello", layout = MainLayout.class)
@RouteAlias(value = "", layout = MainLayout.class)
public class HelloWorldView extends HorizontalLayout {


    public HelloWorldView() {
        this.setSizeFull();
        FullCalendar calendar = FullCalendarBuilder.create()
                .build();
        calendar.setBusinessHours(new BusinessHours(LocalTime.of(8, 0), LocalTime.of(19, 0), BusinessHours.DEFAULT_BUSINESS_WEEK),
                new BusinessHours(LocalTime.of(8, 0), LocalTime.of(15, 0), DayOfWeek.SATURDAY));
        calendar.setFirstDay(DayOfWeek.MONDAY);

        calendar.changeView(CalendarViewImpl.TIME_GRID_WEEK);
        calendar.setSizeFull();

        this.add(calendar);
        this.setFlexGrow(1, calendar);
    }

}

Then, it'll look like this:

[aetasoul]

Probably the same as this: #108

[aetasoul]

Try use calendar.addCustomStyle(".fc .fc-scrollgrid-section-sticky > * {z-index: 1;} "); and let me know if it fix

[AlexRoig]

Almost there, still some parts of the all-day section are shown but the header is rendered properly

[aetasoul]

Ok so the problem is similar to #108

Try with different z-index values

[AlexRoig]

I'll give it a try, thanks for your help!!
Anyway, the allDaySlot I'll have to disable it, so just fixing the header is good for me.

Thanks!