🔧 FIX: Растягивание внешней пилюли с улучшенной логикой и ResizeObserver

smartsoltech/web/templates/web/home_modern.html

@@ -704,8 +704,14 @@
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
     transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     min-width: 60px;
+    width: 120px;
     display: flex;
     justify-content: center;
+    transform-origin: center;
+}
+
+.outer-pill.expanding {
+    transform: scale(1.02);
 }
 
 .pill-indicators {
@@ -921,19 +927,35 @@ document.addEventListener('DOMContentLoaded', function() {
         });
         
         // Анимация внешней pill (растягивается под активный элемент)
-        if (outerPill) {
-            const activeIndicator = indicators[index];
-            if (activeIndicator) {
-                // Измеряем ширину активного элемента
-                const activeRect = activeIndicator.getBoundingClientRect();
-                const containerRect = outerPill.getBoundingClientRect();
-                
-                // Вычисляем нужную ширину (с учетом padding)
-                const newWidth = Math.max(activeRect.width + 40, 120);
-                outerPill.style.width = newWidth + 'px';
-                outerPill.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
+        setTimeout(() => {
+            if (outerPill) {
+                const activeIndicator = indicators[index];
+                if (activeIndicator) {
+                    // Даем время для применения стилей активного элемента
+                    setTimeout(() => {
+                        // Вычисляем ширину на основе текста
+                        const titleElement = activeIndicator.querySelector('.pill-indicator-title');
+                        let calculatedWidth = 120; // минимальная ширина
+                        
+                        if (titleElement && titleElement.textContent) {
+                            // Примерная формула: длина текста * 8px + padding
+                            const textLength = titleElement.textContent.length;
+                            calculatedWidth = Math.max(textLength * 8 + 60, 120);
+                        }
+                        
+                        console.log('Updating outer pill width to:', calculatedWidth);
+                        outerPill.style.width = calculatedWidth + 'px';
+                        outerPill.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
+                        
+                        // Также обновляем ширину контейнера индикаторов
+                        const pillIndicators = document.querySelector('.pill-indicators');
+                        if (pillIndicators) {
+                            pillIndicators.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
+                        }
+                    }, 50);
+                }
             }
-        }
+        }, 10);
         
         currentActiveIndex = index;
     }
@@ -941,7 +963,17 @@ document.addEventListener('DOMContentLoaded', function() {
     // Обработчики событий для индикаторов
     indicators.forEach((indicator, index) => {
         indicator.addEventListener('click', function() {
+            console.log('Clicked indicator:', index);
             currentActiveIndex = index;
+            
+            // Добавляем класс расширения
+            if (outerPill) {
+                outerPill.classList.add('expanding');
+                setTimeout(() => {
+                    outerPill.classList.remove('expanding');
+                }, 400);
+            }
+            
             updatePillState(index);
         });
         
@@ -965,14 +997,41 @@ document.addEventListener('DOMContentLoaded', function() {
     if (carousel) {
         carousel.addEventListener('slide.bs.carousel', function(event) {
             const nextIndex = event.to;
+            console.log('Carousel sliding to:', nextIndex);
             currentActiveIndex = nextIndex;
+            
+            // Добавляем класс расширения при смене слайда
+            if (outerPill) {
+                outerPill.classList.add('expanding');
+                setTimeout(() => {
+                    outerPill.classList.remove('expanding');
+                }, 400);
+            }
+            
             updatePillState(nextIndex);
         });
         
         // Инициализируем первое состояние
         setTimeout(() => {
+            console.log('Initializing pill state...');
             updatePillState(0);
-        }, 100);
+        }, 200);
+    }
+    
+    // Отслеживаем изменения размеров активного элемента
+    if (window.ResizeObserver) {
+        const resizeObserver = new ResizeObserver(entries => {
+            if (outerPill) {
+                const activeIndicator = indicators[currentActiveIndex];
+                if (activeIndicator && activeIndicator.classList.contains('active')) {
+                    updatePillState(currentActiveIndex);
+                }
+            }
+        });
+        
+        indicators.forEach(indicator => {
+            resizeObserver.observe(indicator);
+        });
     }
     
     // Animate elements on scroll