fix(web): settings search reaches rows in collapsed sections

apps/web/src/components/settings/settingsLayout.test.tsx

@@ -87,6 +87,45 @@ describe("settings search targets", () => {
     expect(add).not.toHaveBeenCalled();
   });
 
+  it("scrolls again once an opening collapsible panel finishes growing", () => {
+    const scrollIntoView = vi.fn();
+    let onTransitionEnd: ((event: { target: unknown }) => void) | undefined;
+    const panel = {
+      addEventListener: vi.fn((_type: string, listener: typeof onTransitionEnd) => {
+        onTransitionEnd = listener;
+      }),
+      removeEventListener: vi.fn(),
+    };
+    const closest = vi.fn(() => panel);
+    const target = {
+      tagName: "DIV",
+      firstElementChild: null,
+      parentElement: { closest },
+      scrollIntoView,
+      focus: vi.fn(),
+      classList: { remove: vi.fn(), add: vi.fn() },
+      addEventListener: vi.fn(),
+      offsetWidth: 100,
+    } as unknown as HTMLElement;
+    vi.stubGlobal("document", {
+      getElementById: vi.fn(() => target),
+    });
+    vi.stubGlobal("window", {
+      matchMedia: vi.fn(() => ({ matches: false })),
+    });
+
+    expect(scrollToSettingsTarget("legacy-sidebar")).toBe(true);
+    expect(closest).toHaveBeenCalledWith('[data-slot="collapsible-panel"][data-starting-style]');
+    expect(scrollIntoView).toHaveBeenCalledTimes(1);
+
+    onTransitionEnd?.({ target: {} });
+    expect(scrollIntoView).toHaveBeenCalledTimes(1);
+
+    onTransitionEnd?.({ target: panel });
+    expect(scrollIntoView).toHaveBeenCalledTimes(2);
+    expect(panel.removeEventListener).toHaveBeenCalledWith("transitionend", onTransitionEnd);
+  });
+
   it("leaves not-yet-mounted destinations to their mount lifecycle", () => {
     vi.stubGlobal("document", {
       getElementById: vi.fn(() => null),

apps/web/src/components/settings/settingsLayout.tsx

@@ -92,10 +92,25 @@ function scrollAndFocusSettingsTarget(target: HTMLElement, highlight = true): vo
       ? (target.firstElementChild as HTMLElement)
       : target);
 
-  scrollTarget.scrollIntoView({
-    behavior: prefersReducedMotion ? "auto" : "smooth",
-    block: "center",
-  });
+  const scroll = () =>
+    scrollTarget.scrollIntoView({
+      behavior: prefersReducedMotion ? "auto" : "smooth",
+      block: "center",
+    });
+  scroll();
+  // A target inside a collapsible panel that is still opening is measured
+  // before the panel reaches full height, so scroll again once it has grown.
+  const openingPanel = target.parentElement?.closest<HTMLElement>(
+    '[data-slot="collapsible-panel"][data-starting-style]',
+  );
+  if (openingPanel) {
+    const onPanelOpened = (event: TransitionEvent) => {
+      if (event.target !== openingPanel) return;
+      openingPanel.removeEventListener("transitionend", onPanelOpened);
+      scroll();
+    };
+    openingPanel.addEventListener("transitionend", onPanelOpened);
+  }
   target.focus({ preventScroll: true });
   target.classList.remove("settings-search-target-pulse");
   if (!highlight || prefersReducedMotion) return;