fix: break ScrollButton/ResizeObserver feedback loop causing scroll snap

Move ScrollButton outside contentRef (the ResizeObserver-watched div) into
ScrollContainer itself. Previously the button's 32px show/hide cycle based on
isAtBottom caused the ResizeObserver to snap scrollTop, which toggled
isAtBottom, which toggled the button — infinite ±32px oscillation that made
it impossible to scroll up in the tools UI.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: BlueHotDog

.changeset/fix-scroll-button-feedback-loop.md

@@ -0,0 +1,10 @@
+---
+"@frontman/client": patch
+---
+
+fix: move ScrollButton outside contentRef to break ResizeObserver feedback loop
+
+The scroll-to-bottom button was rendered inside the ResizeObserver-watched div.
+Its 32px show/hide cycle (driven by `isAtBottom`) caused the ResizeObserver to
+snap scroll position, which toggled `isAtBottom`, which toggled the button —
+creating an infinite oscillation that made it impossible to scroll up.

apps/marketing/src/components/ui/NavigationBar.astro

@@ -150,14 +150,14 @@ function isActivePath(currentPath: string): boolean {
 
 	/* -- Nav links (centered) -- */
 	.header__menu {
-		@apply invisible fixed h-dvh w-full justify-center overflow-hidden overflow-y-auto overscroll-contain opacity-0 transition-[opacity,visibility] duration-300;
+		@apply invisible fixed left-0 top-0 h-dvh w-full justify-center overflow-hidden overflow-y-auto overscroll-contain opacity-0 transition-[opacity,visibility] duration-300;
 		z-index: 998;
 		background: rgba(10, 10, 10, 0.97);
 		list-style: none;
-		margin: 0;
+		margin: 12px 16px 0;
 		padding: 5rem 2rem 2rem;
-		left: 0;
-		top: 0;
+		width: calc(100% - 32px);
+		height: calc(100dvh - 12px);
 		border-radius: 16px;
 	}
 	@media (min-width: 1024px) {

libs/client/src/Client__Chatbox.res

@@ -121,22 +121,29 @@ let make = (
   let usageInfo = Client__State.useSelector(Client__State.Selectors.usageInfo)
   let configOptions = Client__State.useSelector(Client__State.Selectors.configOptions)
   let selectedModelValue = Client__State.useSelector(Client__State.Selectors.selectedModelValue)
-  let hasProviderConfigured = Client__State.useSelector(Client__State.Selectors.hasAnyProviderConfigured)
-  let webPreviewIsSelecting = Client__State.useSelector(Client__State.Selectors.webPreviewIsSelecting)
+  let hasProviderConfigured = Client__State.useSelector(
+    Client__State.Selectors.hasAnyProviderConfigured,
+  )
+  let webPreviewIsSelecting = Client__State.useSelector(
+    Client__State.Selectors.webPreviewIsSelecting,
+  )
   let annotations = Client__State.useSelector(Client__State.Selectors.annotations)
-  let hasEnrichingAnnotations = Client__State.useSelector(Client__State.Selectors.hasEnrichingAnnotations)
+  let hasEnrichingAnnotations = Client__State.useSelector(
+    Client__State.Selectors.hasEnrichingAnnotations,
+  )
   let runtimeConfig = RuntimeConfig.read()
-  let hasEnvKey = RuntimeConfig.hasOpenrouterKey(runtimeConfig) || RuntimeConfig.hasAnthropicKey(runtimeConfig)
+  let hasEnvKey =
+    RuntimeConfig.hasOpenrouterKey(runtimeConfig) || RuntimeConfig.hasAnthropicKey(runtimeConfig)
   let hasAnyKey = hasProviderConfigured || hasEnvKey
 
-  let modelConfigOption = configOptions->Option.flatMap(opts =>
-    FrontmanAiFrontmanProtocol.FrontmanProtocol__ACP.findConfigOptionByCategory(opts, Model)
-  )
+  let modelConfigOption =
+    configOptions->Option.flatMap(opts =>
+      FrontmanAiFrontmanProtocol.FrontmanProtocol__ACP.findConfigOptionByCategory(opts, Model)
+    )
   let isModelsConfigLoading = configOptions->Option.isNone
 
   let isUsageExhausted = switch (usageInfo, hasAnyKey) {
-  | (Some({remaining: Some(remaining), hasServerKey: Some(true)}), false)
-    if remaining <= 0 => true
+  | (Some({remaining: Some(remaining), hasServerKey: Some(true)}), false) if remaining <= 0 => true
   | _ => false
   }
 
@@ -154,15 +161,20 @@ let make = (
 
   let handleSubmit = (~text: string, ~inputItems: array<Client__PromptInput.inputItem>) => {
     // Snapshot live annotations into serializable MessageAnnotation records
-    let messageAnnotations = annotations->Array.map(Client__Message.MessageAnnotation.fromAnnotation)
+    let messageAnnotations =
+      annotations->Array.map(Client__Message.MessageAnnotation.fromAnnotation)
 
-    let sendWithContent = (content) => {
+    let sendWithContent = content => {
       // Allow send if there's content OR annotations (annotations are first-class message content)
       switch Array.length(content) > 0 || Array.length(messageAnnotations) > 0 {
       | false => ()
       | true =>
         let sendMessage = (sessionId: string) => {
-          Client__State.Actions.addUserMessage(~sessionId, ~content, ~annotations=messageAnnotations)
+          Client__State.Actions.addUserMessage(
+            ~sessionId,
+            ~content,
+            ~annotations=messageAnnotations,
+          )
         }
         switch session {
         | Some(sess) => sendMessage(sess.sessionId)
@@ -196,8 +208,10 @@ let make = (
       let _ =
         fileData
         ->Array.map(((id, name, mediaType, dataUrl)) => {
-          Client__ImageLimits.constrainDataUrl(dataUrl, Client__ImageLimits.conservative)
-          ->Promise.then(constrained => {
+          Client__ImageLimits.constrainDataUrl(
+            dataUrl,
+            Client__ImageLimits.conservative,
+          )->Promise.then(constrained => {
             let actualMediaType = switch constrained->String.startsWith("data:image/jpeg") {
             | true => "image/jpeg"
             | false => mediaType
@@ -242,9 +256,11 @@ let make = (
         let stableGroup: ToolGroupTypes.toolGroup = switch prevCache->Dict.get(group.id) {
         | Some(prev)
           if Array.length(prev.toolCalls) == Array.length(group.toolCalls) &&
-            prev.toolCalls->Array.everyWithIndex((prevTc, i) => {
-              prevTc === group.toolCalls->Array.getUnsafe(i)
-            }) => prev
+            prev.toolCalls->Array.everyWithIndex(
+              (prevTc, i) => {
+                prevTc === group.toolCalls->Array.getUnsafe(i)
+              },
+            ) => prev
         | _ => group
         }
         newCache->Dict.set(stableGroup.id, stableGroup)
@@ -360,11 +376,7 @@ let make = (
       }
 
       <div key={messageId} className="frontman-content-auto">
-        <TodoListBlock
-          todos
-          isLoading
-          messageId
-        />
+        <TodoListBlock todos isLoading messageId />
       </div>
 
     | ErrorMsg(Message.Error(err), _) =>
@@ -411,7 +423,6 @@ let make = (
           messageId={thinkingMessageId}
         />
       </ScrollContainer.ContentWrapper>
-      <ScrollContainer.ScrollButton />
     </ScrollContainer>
     <Client__PlanDisplay entries=planEntries />
     <Client__SelectedElementDisplay />
@@ -433,8 +444,7 @@ let make = (
         modelConfigOption
         isModelsConfigLoading
         selectedModelValue
-        onModelChange={value =>
-          Client__State.Actions.setSelectedModelValue(~value)}
+        onModelChange={value => Client__State.Actions.setSelectedModelValue(~value)}
         isAgentRunning
         hasActiveACPSession
         disabled={isUsageExhausted}

libs/client/src/components/frontman/Client__ScrollContainer.res

@@ -1,13 +1,12 @@
+// --- Scroll context ---
+
 /**
  * Client__ScrollContainer - Scrollable container with stick-to-bottom behavior
  *
  * Uses CSS overflow-anchor for zero-JS stick-to-bottom during streaming,
  * and IntersectionObserver for passive isAtBottom tracking.
  * Replaces use-stick-to-bottom to eliminate layout thrashing (see #177).
  */
-
-// --- Scroll context ---
-
 type scrollContext = {
   isAtBottom: bool,
   scrollToBottom: unit => unit,
@@ -49,11 +48,7 @@ module ScrollButton = {
     if isAtBottom {
       React.null
     } else {
-      <button
-        type_="button"
-        onClick={_ => scrollToBottom()}
-        className={buttonClassName}
-      >
+      <button type_="button" onClick={_ => scrollToBottom()} className={buttonClassName}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
@@ -94,14 +89,13 @@ let make = (~className: option<string>=?, ~children: React.element) => {
   React.useEffect0(() => {
     switch (sentinelRef.current->Nullable.toOption, containerRef.current->Nullable.toOption) {
     | (Some(sentinel), Some(container)) =>
-      let observer = Bindings__IntersectionObserver.make(
-        entries => {
-          entries->Array.forEach(entry => {
+      let observer = Bindings__IntersectionObserver.make(entries => {
+        entries->Array.forEach(
+          entry => {
             setIsAtBottom(_ => entry.isIntersecting)
-          })
-        },
-        {root: container, rootMargin: "10px", threshold: [0.0]},
-      )
+          },
+        )
+      }, {root: container, rootMargin: "10px", threshold: [0.0]})
       observer->Bindings__IntersectionObserver.observe(sentinel)
       Some(() => Bindings__IntersectionObserver.disconnect(observer))
     | _ => None
@@ -111,8 +105,7 @@ let make = (~className: option<string>=?, ~children: React.element) => {
   let scrollToBottom = React.useCallback0(() => {
     switch sentinelRef.current->Nullable.toOption {
     | None => ()
-    | Some(sentinel) =>
-      sentinel->Bindings__DomScrollIntoView.scrollIntoView({behavior: "smooth"})
+    | Some(sentinel) => sentinel->Bindings__DomScrollIntoView.scrollIntoView({behavior: "smooth"})
     }
   })
 
@@ -129,8 +122,7 @@ let make = (~className: option<string>=?, ~children: React.element) => {
 
       let contentObserver = FrontmanBindings.ResizeObserver.make(_ => {
         let nearBottom =
-          el.scrollTop +. el.clientHeight->Int.toFloat >=
-            el.scrollHeight->Int.toFloat -. 150.0
+          el.scrollTop +. el.clientHeight->Int.toFloat >= el.scrollHeight->Int.toFloat -. 150.0
         if nearBottom {
           el.scrollTop = el.scrollHeight->Int.toFloat
         }
@@ -168,15 +160,14 @@ let make = (~className: option<string>=?, ~children: React.element) => {
 
   <Provider value={contextValue}>
     <div ref={ReactDOM.Ref.domRef(containerRef)} className={containerClassName} role="log">
-      <div ref={ReactDOM.Ref.domRef(contentRef)}>
-        {children}
-      </div>
+      <div ref={ReactDOM.Ref.domRef(contentRef)}> {children} </div>
+      // ScrollButton lives here — outside contentRef — so its show/hide does not
+      // affect the ResizeObserver-watched div and cannot trigger the snap feedback loop.
+      <ScrollButton />
       // Sentinel: overflow-anchor keeps it in view while the user is at the bottom.
       // All message wrappers have overflow-anchor: none (via .frontman-content-auto).
       <div
-        ref={ReactDOM.Ref.domRef(sentinelRef)}
-        className="frontman-scroll-anchor"
-        ariaHidden=true
+        ref={ReactDOM.Ref.domRef(sentinelRef)} className="frontman-scroll-anchor" ariaHidden=true
       />
     </div>
   </Provider>
@@ -194,8 +185,6 @@ module ContentWrapper = {
       }
     }, [className])
 
-    <div className={contentClassName}>
-      {children}
-    </div>
+    <div className={contentClassName}> {children} </div>
   }
 }