Update mobile view.

Author: nikoshell

src/components/sections/speakers.astro

@@ -19,14 +19,6 @@ 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">
@@ -53,17 +45,9 @@ function formatSpeakerName(name: string) {
                   />
                 </div>
                 <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)}
+                    {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>
@@ -95,7 +79,7 @@ function formatSpeakerName(name: string) {
     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;
@@ -109,20 +93,20 @@ function formatSpeakerName(name: string) {
       const slidesPerView = getSlidesPerView();
       const slideWidth = 100 / slidesPerView;
 
-      // Reset position when breakpoint changes
+
       currentPosition = 0;
       track.style.transition = 'none';
       track.style.transform = `translateX(0)`;
 
-      // Clear and restart animation
+
       if (slidingInterval !== null) {
         clearInterval(slidingInterval);
       }
       startAnimation(slideWidth);
     }
 
     function startAnimation(slideWidth: number) {
-      // Initial setup
+
       moveCarousel();
       slidingInterval = setInterval(moveCarousel, scrollSpeed);
 
@@ -132,7 +116,7 @@ function formatSpeakerName(name: string) {
         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';
@@ -147,15 +131,15 @@ function formatSpeakerName(name: string) {
       }
     }
 
-    // Start the carousel
+
     updateCarouselSettings();
 
-    // Update on window resize
+
     window.addEventListener('resize', () => {
       updateCarouselSettings();
     });
 
-    // Pause on hover
+
     const carouselContainer = document.querySelector('.speakers-carousel-container');
     carouselContainer?.addEventListener('mouseenter', () => {
       if (slidingInterval !== null) {
@@ -168,7 +152,7 @@ function formatSpeakerName(name: string) {
       updateCarouselSettings();
     });
 
-    // Pause when tab is not visible
+
     document.addEventListener('visibilitychange', () => {
       if (document.hidden) {
         if (slidingInterval !== null) {
@@ -192,7 +176,6 @@ function formatSpeakerName(name: string) {
     will-change: transform;
   }
 
-  /* Line clamping for text overflow */
   .line-clamp-1 {
     display: -webkit-box;
     -webkit-line-clamp: 1;
@@ -207,7 +190,6 @@ function formatSpeakerName(name: string) {
     overflow: hidden;
   }
 
-  /* These styles match the responsive classes used in the HTML */
   @media (max-width: 1024px) {
     .speaker-slide {
       width: 25%;