From 0d1a4effdb44dbfa86d009fe2328631f442ac584 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 28 Aug 2025 16:47:56 +0530
Subject: [PATCH] refactor: enhance CalendarEventPanel layout with transition
 effects

---
 .../Calendar/CalendarEventPanel.vue           |  2 +-
 frontend/src/pages/Calendar.vue               | 36 ++++++++++++-------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Calendar/CalendarEventPanel.vue b/frontend/src/components/Calendar/CalendarEventPanel.vue
index d384c8bf..3bd1144e 100644
--- a/frontend/src/components/Calendar/CalendarEventPanel.vue
+++ b/frontend/src/components/Calendar/CalendarEventPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" class="flex flex-col w-[352px] border-l text-base">
+  <div v-if="show" class="flex flex-col w-[352px] text-base">
     <!-- Event Header -->
     <div
       class="flex items-center justify-between p-4.5 text-ink-gray-7 text-lg font-medium"
diff --git a/frontend/src/pages/Calendar.vue b/frontend/src/pages/Calendar.vue
index 3b981fcd..4adb6360 100644
--- a/frontend/src/pages/Calendar.vue
+++ b/frontend/src/pages/Calendar.vue
@@ -90,19 +90,29 @@
       </template>
     </Calendar>
 
-    <CalendarEventPanel
-      v-if="showEventPanel"
-      v-model="showEventPanel"
-      :event="event"
-      :mode="mode"
-      @save="saveEvent"
-      @edit="editDetails"
-      @delete="deleteEvent"
-      @duplicate="duplicateEvent"
-      @details="showDetails"
-      @close="close"
-      @sync="syncEvent"
-    />
+    <!-- Event Panel Container -->
+    <div
+      class="overflow-hidden flex-none transition-all duration-300 ease-in-out flex flex-col"
+      :class="
+        showEventPanel
+          ? 'w-[352px] border-l bg-surface-white'
+          : 'w-0 border-l-0'
+      "
+    >
+      <CalendarEventPanel
+        v-if="showEventPanel"
+        v-model="showEventPanel"
+        :event="event"
+        :mode="mode"
+        @save="saveEvent"
+        @edit="editDetails"
+        @delete="deleteEvent"
+        @duplicate="duplicateEvent"
+        @details="showDetails"
+        @close="close"
+        @sync="syncEvent"
+      />
+    </div>
   </div>
 </template>
 <script setup>