From 00e036946ce9b45077a83d6ee328017047bdc90d Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 24 Feb 2026 14:42:09 +0700
Subject: [PATCH] feat(calendar): move labels outside card borders for visual
 continuity

- Month names moved above month cards in year view (outside article border)
  Hidden in non-year views; toolbar shows context label instead
- Day labels (Mon 24, Tue 25) moved above day columns in week view
- Each card/column wrapped in flex container: title above, card below
- New .calendar-card-title CSS: 11px, 55% opacity, subtle label above card
- No duplicate headers: toolbar is the single source of current context

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../workspace/calendar/CrmCalendarPanel.vue   | 96 +++++++++++--------
 1 file changed, 58 insertions(+), 38 deletions(-)

diff --git a/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue b/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
index 450a258..97a7e84 100644
--- a/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
+++ b/frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
@@ -183,37 +183,46 @@ defineProps<{
             class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3 auto-rows-fr"
             :style="calendarViewportHeight > 0 ? { minHeight: `${calendarView === 'year' ? Math.max(420, calendarViewportHeight) : calendarViewportHeight}px` } : undefined"
           >
-            <article
+            <div
               v-for="item in yearMonths"
               :key="`year-month-${item.monthIndex}`"
               v-show="calendarView === 'year' || item.monthIndex === calendarCursorMonth"
-              class="group relative rounded-xl border border-base-300 p-3 text-left transition calendar-hover-targetable"
               :class="[
-                calendarView === 'year'
-                  ? 'h-full hover:border-primary/50 hover:bg-primary/5 cursor-zoom-in'
-                  : 'cursor-default bg-base-100 sm:col-span-2 xl:col-span-3 flex flex-col',
-                calendarHoveredMonthIndex === item.monthIndex ? 'calendar-hover-target' : '',
-                calendarZoomPrimeToken === calendarPrimeMonthToken(item.monthIndex) ? 'calendar-zoom-prime-active' : '',
+                calendarView === 'year' ? 'flex flex-col h-full' : 'sm:col-span-2 xl:col-span-3 flex flex-col',
               ]"
-              :style="{
-                ...calendarPrimeStyle(calendarPrimeMonthToken(item.monthIndex)),
-                ...(calendarView !== 'year' && item.monthIndex === calendarCursorMonth && calendarViewportHeight > 0
-                  ? { minHeight: `${calendarViewportHeight}px` }
-                  : {}),
-              }"
-              :data-calendar-month-index="item.monthIndex"
-              @mouseenter="setCalendarHoveredMonthIndex(item.monthIndex)"
-              @click="calendarView === 'year' ? zoomToMonth(item.monthIndex) : undefined"
             >
-              <p class="font-medium">{{ item.label }}</p>
-              <p class="text-xs text-base-content/60">{{ item.count }} events</p>
-              <button
-                v-if="calendarView === 'year' && item.first"
-                class="mt-1 block w-full text-left text-xs text-base-content/70 hover:underline"
-                @click.stop="openThreadFromCalendarItem(item.first)"
+              <p
+                v-if="calendarView === 'year'"
+                class="calendar-card-title"
+              >{{ item.label }}</p>
+
+              <article
+                class="group relative rounded-xl border border-base-300 p-3 text-left transition calendar-hover-targetable flex-1"
+                :class="[
+                  calendarView === 'year'
+                    ? 'hover:border-primary/50 hover:bg-primary/5 cursor-zoom-in'
+                    : 'cursor-default bg-base-100 flex flex-col',
+                  calendarHoveredMonthIndex === item.monthIndex ? 'calendar-hover-target' : '',
+                  calendarZoomPrimeToken === calendarPrimeMonthToken(item.monthIndex) ? 'calendar-zoom-prime-active' : '',
+                ]"
+                :style="{
+                  ...calendarPrimeStyle(calendarPrimeMonthToken(item.monthIndex)),
+                  ...(calendarView !== 'year' && item.monthIndex === calendarCursorMonth && calendarViewportHeight > 0
+                    ? { minHeight: `${calendarViewportHeight}px` }
+                    : {}),
+                }"
+                :data-calendar-month-index="item.monthIndex"
+                @mouseenter="setCalendarHoveredMonthIndex(item.monthIndex)"
+                @click="calendarView === 'year' ? zoomToMonth(item.monthIndex) : undefined"
               >
-                {{ formatDay(item.first.start) }} · {{ item.first.title }}
-              </button>
+                <p v-if="calendarView === 'year'" class="text-xs text-base-content/60">{{ item.count }} events</p>
+                <button
+                  v-if="calendarView === 'year' && item.first"
+                  class="mt-1 block w-full text-left text-xs text-base-content/70 hover:underline"
+                  @click.stop="openThreadFromCalendarItem(item.first)"
+                >
+                  {{ formatDay(item.first.start) }} · {{ item.first.title }}
+                </button>
 
               <div v-if="item.monthIndex === calendarCursorMonth" class="mt-3 calendar-depth-stack">
                 <div
@@ -284,23 +293,24 @@ defineProps<{
                   :class="calendarView === 'week' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
                 >
                   <div class="calendar-week-grid">
-                    <article
+                    <div
                       v-for="day in weekDays"
                       :key="day.key"
-                      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' : '',
-                        calendarZoomPrimeToken === calendarPrimeDayToken(day.key) ? 'calendar-zoom-prime-active' : '',
-                      ]"
-                      :style="calendarPrimeStyle(calendarPrimeDayToken(day.key))"
-                      :data-calendar-day-key="day.key"
-                      @mouseenter="setCalendarHoveredDayKey(day.key)"
-                      @click="pickDate(day.key)"
+                      class="flex flex-col min-h-full"
                     >
-                      <div class="mb-2 flex items-start justify-between gap-2">
-                        <p class="text-sm font-semibold leading-tight">{{ day.label }} {{ day.day }}</p>
-                      </div>
+                      <p class="calendar-card-title text-center">{{ day.label }} {{ day.day }}</p>
+                      <article
+                        class="group relative flex flex-1 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' : '',
+                          calendarZoomPrimeToken === calendarPrimeDayToken(day.key) ? 'calendar-zoom-prime-active' : '',
+                        ]"
+                        :style="calendarPrimeStyle(calendarPrimeDayToken(day.key))"
+                        :data-calendar-day-key="day.key"
+                        @mouseenter="setCalendarHoveredDayKey(day.key)"
+                        @click="pickDate(day.key)"
+                      >
                       <div class="space-y-1.5">
                         <button
                           v-for="event in day.events"
@@ -314,6 +324,7 @@ defineProps<{
                         <p v-if="day.events.length === 0" class="pt-1 text-xs text-base-content/50">No events</p>
                       </div>
                     </article>
+                    </div>
                   </div>
                 </div>
 
@@ -338,6 +349,7 @@ defineProps<{
                 </div>
               </div>
             </article>
+            </div>
           </div>
         </div>
       </div>
@@ -445,6 +457,14 @@ defineProps<{
   right: 4px;
 }
 
+.calendar-card-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+  padding: 0 4px 2px;
+  user-select: none;
+}
+
 .calendar-week-number {
   display: inline-flex;
   align-items: center;