fix scroll overflow issue in calendar with banner

Onatcer · Onatcer · commit 62f5986b5f06 · 2025-09-02T13:51:40.000+02:00
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
@@ -256,21 +256,21 @@ const page = usePage<{
         </div>
         <div class="flex-1 lg:ml-[230px] 2xl:ml-[250px] min-w-0">
             <div
-                class="lg:hidden w-full px-3 py-1 border-b border-b-default-background-separator text-text-secondary flex justify-between items-center">
-                <Bars3Icon
-                    class="w-7 text-text-secondary"
-                    @click="showSidebarMenu = !showSidebarMenu"></Bars3Icon>
-                <OrganizationSwitcher></OrganizationSwitcher>
-            </div>
-
-            <Head :title="title" />
+                class="h-screen overflow-y-auto flex flex-col bg-default-background border-l border-default-background-separator">
+                <div
+                    class="lg:hidden w-full px-3 py-1 border-b border-b-default-background-separator text-text-secondary flex justify-between items-center">
+                    <Bars3Icon
+                        class="w-7 text-text-secondary"
+                        @click="showSidebarMenu = !showSidebarMenu"></Bars3Icon>
+                    <OrganizationSwitcher></OrganizationSwitcher>
+                </div>
 
-            <Banner />
-            <BillingBanner v-if="isBillingActivated()" />
+                <Head :title="title" />
 
-            <div
-                class="min-h-screen flex flex-col bg-default-background border-l border-default-background-separator">
                 <!-- Page Heading -->
+                <Banner />
+                <BillingBanner v-if="isBillingActivated()" />
+
                 <header
                     v-if="$slots.header"
                     class="bg-default-background border-b border-default-background-separator shadow">
@@ -282,7 +282,7 @@ const page = usePage<{
                 </header>
 
                 <!-- Page Content -->
-                <main :class="twMerge('pb-28 flex-1', mainClass)">
+                <main :class="twMerge('pb-28 relative flex-1', mainClass)">
                     <div
                         v-if="isOrganizationLoading"
                         class="flex items-center justify-center h-screen">
diff --git a/resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue b/resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue
@@ -229,7 +229,7 @@ const calendarOptions = computed(() => ({
         center: 'title',
         right: 'timeGridWeek,timeGridDay',
     },
-    height: '100vh',
+    height: 'parent',
     slotMinTime: '00:00:00',
     slotMaxTime: '24:00:00',
     slotDuration: '00:15:00',
@@ -274,7 +274,7 @@ watch(showEditTimeEntryModal, (value) => {
 </script>
 
 <template>
-    <div class="h-screen w-full relative">
+    <div class="w-full relative h-full flex-1">
         <div v-if="loading" class="flex items-center justify-center h-full">
             <div class="flex flex-col items-center space-y-4">
                 <LoadingSpinner class="h-8 w-8" />
