From 7c019a6300f9ac137d97db34a6f721c0592fe98e Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 23 Feb 2026 14:58:52 +0700
Subject: [PATCH] fix(calendar): keep depth layers mounted in one card without
 display swap

---
 .../workspace/calendar/CrmCalendarPanel.vue   | 43 +++++++++++++++++--
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue b/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
index 6c45e6c..8d41968 100644
--- a/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
+++ b/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
@@ -203,8 +203,11 @@ defineProps<{
                 {{ formatDay(item.first.start) }} · {{ item.first.title }}
               </button>
 
-              <div v-if="item.monthIndex === calendarCursorMonth" class="mt-3">
-                <div v-show="calendarView === 'month' || calendarView === 'agenda'" class="space-y-1">
+              <div v-if="item.monthIndex === calendarCursorMonth" class="mt-3 calendar-depth-stack">
+                <div
+                  class="space-y-1 calendar-depth-layer"
+                  :class="calendarView === 'month' || calendarView === 'agenda' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
+                >
                   <div class="grid grid-cols-7 gap-1 text-center text-xs font-semibold text-base-content/60">
                     <span>Sun</span>
                     <span>Mon</span>
@@ -258,7 +261,10 @@ defineProps<{
                   </div>
                 </div>
 
-                <div v-show="calendarView === 'week'" class="calendar-week-scroll overflow-x-auto pb-1">
+                <div
+                  class="calendar-week-scroll overflow-x-auto pb-1 calendar-depth-layer"
+                  :class="calendarView === 'week' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
+                >
                   <div class="calendar-week-grid">
                     <article
                       v-for="day in weekDays"
@@ -293,7 +299,10 @@ defineProps<{
                   </div>
                 </div>
 
-                <div v-show="calendarView === 'day'" class="space-y-2">
+                <div
+                  class="space-y-2 calendar-depth-layer"
+                  :class="calendarView === 'day' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
+                >
                   <button
                     v-for="event in selectedDayEvents"
                     :key="event.id"
@@ -352,6 +361,32 @@ defineProps<{
   min-width: 1180px;
 }
 
+.calendar-depth-stack {
+  position: relative;
+  min-height: 100%;
+}
+
+.calendar-depth-layer {
+  transition: opacity 260ms ease, transform 260ms ease;
+}
+
+.calendar-depth-layer-active {
+  opacity: 1;
+  transform: translateY(0);
+  position: relative;
+  z-index: 1;
+  pointer-events: auto;
+}
+
+.calendar-depth-layer-hidden {
+  opacity: 0;
+  transform: translateY(10px);
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
 .calendar-side-nav {
   position: absolute;
   top: 50%;