Fix carousel CSS and add debug logging

- Fixed carousel container height calculation
- Only non-active items are absolutely positioned
- Added console logging to debug carousel rotation
- Active item stays relative to maintain container height

shopfloor-dashboard/index.html

@@ -387,20 +387,25 @@
         .upcoming-carousel-container {
             position: relative;
             overflow: hidden;
-            min-height: 200px;
+            width: 100%;
         }
 
         .upcoming-carousel-wrapper {
             position: relative;
             width: 100%;
+            min-height: 200px;
         }
 
         .event-card.upcoming.carousel-item {
-            position: absolute;
             width: 100%;
+            transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
+            margin-bottom: 0;
+        }
+
+        .event-card.upcoming.carousel-item:not(.active) {
+            position: absolute;
             top: 0;
             left: 0;
-            transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
         }
 
         .event-card.upcoming.carousel-item.active {
@@ -913,11 +918,14 @@
 
         // Start the upcoming events carousel
         function startUpcomingCarousel() {
+            console.log(`Carousel: Starting carousel with ${upcomingEvents.length} events`);
+
             // Clear any existing interval
             stopUpcomingCarousel();
 
             // Start new interval (5 seconds)
             upcomingCarouselInterval = setInterval(rotateUpcomingEvent, 5000);
+            console.log('Carousel: Interval set for 5 seconds');
         }
 
         // Stop the upcoming events carousel
@@ -930,13 +938,24 @@
 
         // Rotate to next upcoming event
         function rotateUpcomingEvent() {
-            if (upcomingEvents.length <= 1) return;
+            if (upcomingEvents.length <= 1) {
+                console.log('Carousel: Not enough events to rotate');
+                return;
+            }
 
             const carousel = document.getElementById('upcomingCarousel');
-            if (!carousel) return;
+            if (!carousel) {
+                console.log('Carousel: Carousel element not found');
+                return;
+            }
 
             const items = carousel.querySelectorAll('.carousel-item');
-            if (items.length === 0) return;
+            if (items.length === 0) {
+                console.log('Carousel: No carousel items found');
+                return;
+            }
+
+            console.log(`Carousel: Rotating from index ${currentUpcomingIndex} to ${(currentUpcomingIndex + 1) % upcomingEvents.length} (${items.length} total items)`);
 
             const currentItem = items[currentUpcomingIndex];
             const nextIndex = (currentUpcomingIndex + 1) % upcomingEvents.length;