@eric-emg/symphiq-components 1.2.375 → 1.2.376

package/fesm2022/symphiq-components.mjs

@@ -88683,8 +88683,6 @@ class ShopProfileQuestionAnswerComponent {
             return this.selectedAnswerTexts().length === 0 || this.addOtherAnswersExpanded();
         }, ...(ngDevMode ? [{ debugName: "saveButtonsDisabled" }] : []));
         this.stickyState = false;
-        this.lastStickyChange = 0;
-        this.stickyChangeCount = 0;
         // Initialize selected answers from existing profile answers
         effect(() => {
             const questionId = this.question().id;
@@ -88706,47 +88704,35 @@ class ShopProfileQuestionAnswerComponent {
         const header = this.stickyHeader?.nativeElement;
         const title = this.questionTitle?.nativeElement;
         if (!sentinel || !scrollRoot || !header) {
-            console.log('[StickyDebug] Setup failed - missing elements:', { sentinel: !!sentinel, scrollRoot: !!scrollRoot, header: !!header });
             return;
         }
-        console.log('[StickyDebug] Setting up IntersectionObserver');
         this.ngZone.runOutsideAngular(() => {
             this.intersectionObserver = new IntersectionObserver((entries) => {
                 entries.forEach((entry) => {
-                    const now = Date.now();
-                    const timeSinceLastChange = now - this.lastStickyChange;
                     const newStickyState = !entry.isIntersecting;
-                    this.stickyChangeCount++;
-                    console.log(`[StickyDebug #${this.stickyChangeCount}] isIntersecting: ${entry.isIntersecting}, boundingClientRect.top: ${entry.boundingClientRect.top.toFixed(1)}, intersectionRatio: ${entry.intersectionRatio.toFixed(3)}, currentSticky: ${this.stickyState}, newSticky: ${newStickyState}, timeSinceLastChange: ${timeSinceLastChange}ms`);
-                    // Debounce: ignore changes within 250ms (longer than the 200ms CSS transition) to prevent flip-flopping
-                    if (timeSinceLastChange < 250 && this.stickyState !== newStickyState) {
-                        console.log(`[StickyDebug] DEBOUNCED - ignoring change from ${this.stickyState} to ${newStickyState} (only ${timeSinceLastChange}ms since last change)`);
-                        return;
-                    }
                     if (this.stickyState === newStickyState) {
-                        console.log(`[StickyDebug] No state change needed (already ${this.stickyState})`);
                         return;
                     }
                     this.stickyState = newStickyState;
-                    this.lastStickyChange = now;
                     if (newStickyState) {
-                        console.log('[StickyDebug] Applying sticky classes');
-                        header.classList.add('shadow-md');
-                        header.classList.add('is-sticky');
+                        // Lock header height BEFORE applying sticky to prevent layout shift
+                        const currentHeight = header.offsetHeight;
+                        header.style.minHeight = `${currentHeight}px`;
+                        header.classList.add('shadow-md', 'is-sticky');
                         title?.classList.add('is-sticky');
                     }
                     else {
-                        console.log('[StickyDebug] Removing sticky classes');
-                        header.classList.remove('shadow-md');
-                        header.classList.remove('is-sticky');
+                        header.classList.remove('shadow-md', 'is-sticky');
                         title?.classList.remove('is-sticky');
+                        // Release height lock after transition completes
+                        setTimeout(() => {
+                            if (!this.stickyState) {
+                                header.style.minHeight = '';
+                            }
+                        }, 200);
                     }
                 });
-            }, {
-                root: scrollRoot,
-                threshold: 0,
-                rootMargin: '-20px 0px 0px 0px'
-            });
+            }, { root: scrollRoot, threshold: 0 });
             this.intersectionObserver.observe(sentinel);
         });
     }