UI: Update browser tab title dynamically with DAG name

[Subham-KRLX]

The browser tab title always showed Airflow in the new React UI because BaseLayout.tsx set it synchronously on every render.

We wrapped the default title logic in a useEffect hook so that it only sets the fallback title on mount. We also added a useDocumentTitle hook and called it in the DAG detail page to show the DAG name dynamically.

closes: #67145

Was generative AI tooling used to co-author this PR?
Yes — Claude (For PR description)

[bbovenzi]

Good call.

We probably want to expand this to every page. But that can be a follow-up PR

[Subham-KRLX]

Good call.

We probably want to expand this to every page. But that can be a follow-up PR

Agreed. Let's handle expanding this to all other pages in a follow up PR.

[choo121600]

Cool :)

[choo121600]

I think there may be an effect ordering issue here between BaseLayout and Header.

On a hard refresh of /dags/<dag_id>, both useDocumentTitle() hooks mount in the same commit, and React runs effects child → parent:

1. Header sets "examole Dag - Airflow"
2. BaseLayout overwrites it with "Airflow"

Screen.Recording.2026-05-20.at.11.30.26.PM.mov

Could you double-check the hard-refresh case?

[Subham-KRLX]

I think there may be an effect ordering issue here between BaseLayout and Header.

On a hard refresh of /dags/<dag_id>, both useDocumentTitle() hooks mount in the same commit, and React runs effects child → parent:

1. Header sets "examole Dag - Airflow"
2. BaseLayout overwrites it with "Airflow"

Screen.Recording.2026-05-20.at.11.30.26.PM.mov
Could you double-check the hard-refresh case?

I removed the hook from BaseLayout to fix the effect ordering issue and simplify the logic

[bbovenzi]

looks good. Let's fix the static checks