fix: prevent log loading from scrolling ancestor elements in task Logs tab

[Pyasma]

Closes: #64757

Problem

When switching to the Logs tab on a task with many log lines, the entire details panel scrolls irreversibly instead of just the log box.

Root cause: scrollToBottom() called scrollIntoView() on a sentinel <div> at the bottom of log content. scrollIntoView walks up the DOM tree scrolling every ancestor element until the target is visible — so div.c-5s5pdh (the details panel) was being scrolled, not just the log box.

Fix

LogBlock.tsx

- const codeBlockBottomDiv = useRef<HTMLDivElement>(null);

  const scrollToBottom = () => {
-   codeBlockBottomDiv.current?.scrollIntoView({
-     block: "nearest",
-     inline: "nearest",
-   });
+   if (logBoxRef.current) {
+     logBoxRef.current.scrollTop = logBoxRef.current.scrollHeight;
+   }
  };

  <div dangerouslySetInnerHTML={{ __html: parsedLogs }} />
- <div ref={codeBlockBottomDiv} />

scrollTop = scrollHeight sets the scroll position directly on the log box element only. Nothing outside it moves.

useOffsetTop.ts

- const useOffsetTop = (contentRef: React.RefObject<HTMLElement>) => {
+ const useOffsetTop = (contentRef: React.RefObject<HTMLElement | null>) => {

Updated parameter type to accept null inside the generic — required because useRef<HTMLElement>(null) now returns RefObject<HTMLElement | null> in newer React/TypeScript versions.

---

Was generative AI tooling used to co-author this PR?

• Yes — Claude Code (claude-sonnet-4-6) following the guidelines

[pierrejeambrun]

Were you able to test this change? Can you provide a screen recording of before vs after?

I tried myself but it doesn't seem to fix the issue. (grid container is stilled scrolled down when the logs are being scrolled down)

[pierrejeambrun]

Nit: This seems unrelated to the change.

[Pyasma]

hey @pierrejeambrun these changes were suggested by Claude code I wasn't able to reproduce the issue on my end before

I just finished with the problem of reproducing

will push the changes soon

[Pyasma]

sure i will also add the video to show the After and Before changes

[Copilot]

Pull request overview

Fixes an Airflow UI scrolling bug in the Task Instance Logs tab where auto-scrolling to the bottom of loaded logs was inadvertently scrolling ancestor containers (e.g., the task details panel), not just the log viewport.

Changes:

• Replace scrollIntoView() on a sentinel element with direct scrollTop manipulation on the log container to constrain scrolling to the log box.
• Remove the now-unnecessary bottom sentinel <div> from the log markup.
• Broaden useOffsetTop’s ref parameter type to better support refs initialized with null under newer React/TypeScript typings.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
airflow/www/static/js/dag/details/taskInstance/Logs/LogBlock.tsx	Ensures “scroll to bottom” only scrolls the log container by setting scrollTop directly and removing the sentinel element.
airflow/www/static/js/utils/useOffsetTop.ts	Adjusts hook ref typing to accept null within the generic, aligning with newer React/TS ref patterns.