Update mobile view.

Author: nikoshell

src/components/sections/speakers.astro

@@ -18,6 +18,15 @@ const featuredSpeakers = getRandomSpeakers(validSpeakers, 15);
 
 const sectionTitle = "Featured Speakers";
 const sectionSubtitle = "Meet some of our amazing speakers";
+
+// Helper function to truncate names if needed
+function formatSpeakerName(name: string) {
+  // Option: You could truncate very long names
+  // if (name.length > 20) {
+  //   return name.substring(0, 18) + '...';
+  // }
+  return name;
+}
 ---
 
 <section class="py-16 px-4 bg-gray-50">
@@ -43,10 +52,18 @@ const sectionSubtitle = "Meet some of our amazing speakers";
                     loading="eager"
                   />
                 </div>
-                <div class="p-4 text-center">
-                  <h3 class="font-bold text-lg text-gray-900 group-hover:text-primary transition-colors">
-                    {speaker.data.name}
+                <div class="p-4 text-center h-[88px] flex flex-col justify-center">
+                  <!-- Solution: Use text-ellipsis with 2 lines max and remove whitespace-nowrap -->
+                  <h3 class="font-bold text-lg text-gray-900 group-hover:text-primary transition-colors line-clamp-2">
+                    {formatSpeakerName(speaker.data.name)}
                   </h3>
+
+                  <!-- Optional: Add role/title with ellipsis if available -->
+                  {speaker.data.title && (
+                    <p class="text-sm text-gray-600 mt-1 line-clamp-1">
+                      {speaker.data.title}
+                    </p>
+                  )}
                 </div>
               </div>
             </a>
@@ -70,30 +87,52 @@ const sectionSubtitle = "Meet some of our amazing speakers";
   document.addEventListener('DOMContentLoaded', () => {
     const track = document.querySelector('.speakers-track') as HTMLElement;
     const slides = document.querySelectorAll('.speaker-slide');
+    const totalOriginalSlides = slides.length / 2;
 
     if (!track || slides.length === 0) return;
 
-    const slideWidth = 100 / 5;
-    const totalOriginalSlides = slides.length / 2;
     let currentPosition = 0;
     const scrollSpeed = 4000;
+    let slidingInterval: ReturnType<typeof setInterval> | null = null;
+
+    // Function to determine slides per view based on window width
+    function getSlidesPerView() {
+      const width = window.innerWidth;
+      if (width <= 480) return 1;
+      if (width <= 640) return 2;
+      if (width <= 768) return 3;
+      if (width <= 1024) return 4;
+      return 5;
+    }
 
-    slides.forEach((slide) => {
-      (slide as HTMLElement).style.flexBasis = `${slideWidth}%`;
-    });
+    function updateCarouselSettings() {
+      const slidesPerView = getSlidesPerView();
+      const slideWidth = 100 / slidesPerView;
 
-    startAnimation();
+      // Reset position when breakpoint changes
+      currentPosition = 0;
+      track.style.transition = 'none';
+      track.style.transform = `translateX(0)`;
 
-    function startAnimation() {
+      // Clear and restart animation
+      if (slidingInterval !== null) {
+        clearInterval(slidingInterval);
+      }
+      startAnimation(slideWidth);
+    }
+
+    function startAnimation(slideWidth: number) {
+      // Initial setup
       moveCarousel();
-      let slidingInterval = setInterval(moveCarousel, scrollSpeed);
+      slidingInterval = setInterval(moveCarousel, scrollSpeed);
 
       function moveCarousel() {
         currentPosition += slideWidth;
 
         track.style.transition = 'transform 1000ms linear';
         track.style.transform = `translateX(-${currentPosition}%)`;
 
+        // Reset when we've scrolled through the original set of slides
         if (currentPosition >= slideWidth * totalOriginalSlides) {
           setTimeout(() => {
             track.style.transition = 'none';
@@ -103,27 +142,43 @@ const sectionSubtitle = "Meet some of our amazing speakers";
             setTimeout(() => {
               track.style.transition = 'transform 1000ms linear';
             }, 20);
-          }, 4000);
+          }, 1000);
         }
       }
+    }
+
+    // Start the carousel
+    updateCarouselSettings();
 
-      const carouselContainer = document.querySelector('.speakers-carousel-container');
-      carouselContainer?.addEventListener('mouseenter', () => {
+    // Update on window resize
+    window.addEventListener('resize', () => {
+      updateCarouselSettings();
+    });
+
+    // Pause on hover
+    const carouselContainer = document.querySelector('.speakers-carousel-container');
+    carouselContainer?.addEventListener('mouseenter', () => {
+      if (slidingInterval !== null) {
         clearInterval(slidingInterval);
-      });
+        slidingInterval = null;
+      }
+    });
 
-      carouselContainer?.addEventListener('mouseleave', () => {
-        slidingInterval = setInterval(moveCarousel, scrollSpeed);
-      });
+    carouselContainer?.addEventListener('mouseleave', () => {
+      updateCarouselSettings();
+    });
 
-      document.addEventListener('visibilitychange', () => {
-        if (document.hidden) {
+    // Pause when tab is not visible
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) {
+        if (slidingInterval !== null) {
           clearInterval(slidingInterval);
-        } else {
-          slidingInterval = setInterval(moveCarousel, scrollSpeed);
+          slidingInterval = null;
         }
-      });
-    }
+      } else {
+        updateCarouselSettings();
+      }
+    });
   });
 </script>
 
@@ -137,6 +192,22 @@ const sectionSubtitle = "Meet some of our amazing speakers";
     will-change: transform;
   }
 
+  /* Line clamping for text overflow */
+  .line-clamp-1 {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* These styles match the responsive classes used in the HTML */
   @media (max-width: 1024px) {
     .speaker-slide {
       width: 25%;