From 27becf5b2ac5fc29792ba980a1b8f546bc02fb25 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Tue, 19 May 2026 02:00:56 +0200
Subject: [PATCH] fix(settings): remove transient box-shadow pulse on scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The settings-section-scroll directive ran a 260ms Element.animate() on
whichever section became "active" as the user scrolled — three
keyframes painting an `inset 0 0 0 1px var(--settings-group-active-ring)`
ring plus a soft glow on the section block. With the new flat layout
(no card chrome, no static active ring), that pulse drew a brief 1px
border around each block as you scrolled past — the user-reported
"short border kind of highlight around blocks" effect.

The rail's left active state already announces which section you're on,
so the inline pulse is redundant. Removed the entire active-section
animation effect (the pendingScrollTarget scroll-into-view effect is
untouched — that's the click-the-nav-and-jump behaviour).

CDP verifies: all .settings-group elements report `box-shadow: none`
after scrolling. 50/50 settings tests still pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../settings-section-scroll.directive.ts      | 45 ++++---------------
 1 file changed, 8 insertions(+), 37 deletions(-)

diff --git a/apps/web/src/app/settings/settings-section-scroll.directive.ts b/apps/web/src/app/settings/settings-section-scroll.directive.ts
index 1550d6d41..d2207a61d 100644
--- a/apps/web/src/app/settings/settings-section-scroll.directive.ts
+++ b/apps/web/src/app/settings/settings-section-scroll.directive.ts
@@ -45,43 +45,14 @@ export class SettingsSectionScrollDirective
             { injector: this.injector }
         );
 
-        effect(
-            (onCleanup) => {
-                const activeSectionId = this.settingsCtx.activeSection();
-                const activeSectionElement =
-                    this.elementRef.nativeElement.querySelector(
-                        `#${activeSectionId}`
-                    ) as HTMLElement | null;
-
-                if (!activeSectionElement) {
-                    return;
-                }
-
-                const animation = activeSectionElement.animate(
-                    [
-                        {
-                            boxShadow:
-                                'inset 0 0 0 1px var(--settings-group-active-ring), 0 8px 18px -24px var(--settings-group-active-glow)',
-                        },
-                        {
-                            boxShadow:
-                                'inset 0 0 0 1px var(--settings-group-active-ring), 0 12px 22px -24px var(--settings-group-active-glow)',
-                        },
-                        {
-                            boxShadow:
-                                'inset 0 0 0 1px var(--settings-group-active-ring), 0 8px 18px -24px var(--settings-group-active-glow)',
-                        },
-                    ],
-                    {
-                        duration: 260,
-                        easing: 'ease-out',
-                    }
-                );
-
-                onCleanup(() => animation.cancel());
-            },
-            { injector: this.injector }
-        );
+        // The previous active-section change handler ran a 260ms box-shadow
+        // animation (inset 1px ring + soft glow) on whichever section
+        // became active during scroll. With the new flat layout (no card
+        // chrome, no static active ring) that pulse drew a brief 1px
+        // border around each block as the user scrolled past — what the
+        // user reported as "short border kind of highlight around blocks".
+        // The rail's left active state already announces the current
+        // section, so the inline pulse is redundant. Removed entirely.
     }
 
     ngAfterViewInit(): void {