Adds drawer animation for schedule page container

Enhances user experience by implementing smooth container resize animation when opening and closing the schedule drawer

Uses Web Animations API to dynamically adjust page container styling with transition effects

PlanTempus.Application/wwwroot/css/employees.css

@@ -889,7 +889,7 @@ swp-schedule-scroll {
   overflow-x: auto;
 }
 
-/* Når drawer er åben: page-container skal fylde ud til drawer */
+/* Når drawer er åben: page-container styles (animation via JS) */
 body.schedule-drawer-open swp-tab-content[data-tab="schedule"] swp-page-container {
   max-width: none;
   margin: 0;

PlanTempus.Application/wwwroot/ts/modules/employees.ts

@@ -1035,6 +1035,24 @@ class ScheduleController {
       table.style.width = `${rect.width}px`;
     }
 
+    // Animate container med Web Animations API
+    const container = document.querySelector('swp-tab-content[data-tab="schedule"] swp-page-container') as HTMLElement;
+    if (container) {
+      const currentStyles = getComputedStyle(container);
+      const currentMaxWidth = currentStyles.maxWidth;
+      const currentMargin = currentStyles.margin;
+      const currentPaddingRight = currentStyles.paddingRight;
+
+      container.animate([
+        { maxWidth: currentMaxWidth, margin: currentMargin, paddingRight: currentPaddingRight },
+        { maxWidth: 'none', margin: '0px', paddingRight: '420px' }
+      ], {
+        duration: 300,
+        easing: 'ease',
+        fill: 'forwards'
+      });
+    }
+
     this.drawer?.classList.add('open');
     document.body.classList.add('schedule-drawer-open');
   }
@@ -1043,6 +1061,15 @@ class ScheduleController {
    * Close the schedule drawer
    */
   private closeDrawer(): void {
+    const container = document.querySelector('swp-tab-content[data-tab="schedule"] swp-page-container') as HTMLElement;
+    if (container) {
+      // Hent nuværende computed styles for animation
+      const animation = container.getAnimations()[0];
+      if (animation) {
+        animation.cancel();
+      }
+    }
+
     // Fjern låst bredde så tabellen kan tilpasse sig igen
     const table = document.getElementById('scheduleTable');
     if (table) {