From 0bbeef5594b8a78f439edcf559f33c59a565f6fc Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 23 Feb 2026 15:32:52 +0700
Subject: [PATCH] fix(calendar): scope zoom selectors by layer and stretch week
 days to full height

---
 .../components/workspace/CrmWorkspaceApp.vue  | 22 ++++++++++++-------
 .../workspace/calendar/CrmCalendarPanel.vue   |  9 ++++++--
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/workspace/CrmWorkspaceApp.vue b/frontend/app/components/workspace/CrmWorkspaceApp.vue
index 02b45c5..3db145e 100644
--- a/frontend/app/components/workspace/CrmWorkspaceApp.vue
+++ b/frontend/app/components/workspace/CrmWorkspaceApp.vue
@@ -2765,10 +2765,10 @@ async function zoomInCalendar(event?: Event) {
     const anchorDayKey = resolveWeekAnchor(wheelEvent);
     const rowStartKey = weekRowStartForDate(anchorDayKey);
     const sourceElement =
-      queryCalendarElement(`[data-calendar-week-start-key="${rowStartKey}"]`) ??
-      queryCalendarElement(`[data-calendar-day-key="${anchorDayKey}"]`) ??
-      queryCalendarElement("[data-calendar-week-start-key]") ??
-      queryCalendarElement("[data-calendar-day-key]");
+      queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key="${rowStartKey}"]`) ??
+      queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key="${anchorDayKey}"]`) ??
+      queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key]`) ??
+      queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key]`);
     if (maybePrimeWheelZoom(wheelEvent, calendarPrimeWeekToken(rowStartKey))) return;
     await animateCalendarZoomIntoSource(sourceElement, () => {
       openWeekView(anchorDayKey);
@@ -2778,7 +2778,9 @@ async function zoomInCalendar(event?: Event) {
 
   if (calendarView.value === "week") {
     const dayAnchor = resolveDayAnchor(wheelEvent);
-    const sourceElement = queryCalendarElement(`[data-calendar-day-key="${dayAnchor}"]`) ?? queryCalendarElement("[data-calendar-day-key]");
+    const sourceElement =
+      queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key="${dayAnchor}"]`) ??
+      queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key]`);
     if (maybePrimeWheelZoom(wheelEvent, calendarPrimeDayToken(dayAnchor))) return;
     await animateCalendarZoomIntoSource(sourceElement, () => {
       openDayView(dayAnchor);
@@ -2803,7 +2805,9 @@ async function zoomOutCalendar() {
       () => {
         calendarView.value = "week";
       },
-      () => queryCalendarElement(`[data-calendar-day-key="${targetDayKey}"]`),
+      () =>
+        queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key="${targetDayKey}"]`) ??
+        queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key]`),
     );
     return;
   }
@@ -2816,8 +2820,10 @@ async function zoomOutCalendar() {
         calendarView.value = "month";
       },
       () =>
-        queryCalendarElement(`[data-calendar-week-start-key="${targetRowKey}"]`) ??
-        queryCalendarElement(`[data-calendar-day-key="${selectedDateKey.value}"]`),
+        queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key="${targetRowKey}"]`) ??
+        queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key="${selectedDateKey.value}"]`) ??
+        queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key]`) ??
+        queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key]`),
     );
     return;
   }
diff --git a/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue b/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
index 8d41968..3d669a6 100644
--- a/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
+++ b/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
@@ -206,6 +206,7 @@ defineProps<{
               <div v-if="item.monthIndex === calendarCursorMonth" class="mt-3 calendar-depth-stack">
                 <div
                   class="space-y-1 calendar-depth-layer"
+                  data-calendar-layer="month"
                   :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">
@@ -262,14 +263,15 @@ defineProps<{
                 </div>
 
                 <div
-                  class="calendar-week-scroll overflow-x-auto pb-1 calendar-depth-layer"
+                  class="calendar-week-scroll h-full min-h-0 overflow-x-auto pb-1 calendar-depth-layer"
+                  data-calendar-layer="week"
                   :class="calendarView === 'week' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
                 >
                   <div class="calendar-week-grid">
                     <article
                       v-for="day in weekDays"
                       :key="day.key"
-                      class="group relative flex min-h-[18rem] flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable"
+                      class="group relative flex h-full min-h-full flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable"
                       :class="[
                         selectedDateKey === day.key ? 'border-primary bg-primary/5' : '',
                         calendarHoveredDayKey === day.key ? 'calendar-hover-target' : '',
@@ -301,6 +303,7 @@ defineProps<{
 
                 <div
                   class="space-y-2 calendar-depth-layer"
+                  data-calendar-layer="day"
                   :class="calendarView === 'day' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
                 >
                   <button
@@ -359,6 +362,8 @@ defineProps<{
   grid-template-columns: repeat(7, minmax(165px, 1fr));
   gap: 8px;
   min-width: 1180px;
+  min-height: 100%;
+  align-items: stretch;
 }
 
 .calendar-depth-stack {