Long task IDs break Airflow UI: task blocks become hidden

[internetcoffeephone]

Apache Airflow version

2.10.4

If "Other Airflow 2 version" selected, which one?

No response

What happened?

When a task ID has a very long task name, e.g. equal to AIRFLOW_MAX_ID_LENGTH, the UI breaks on smaller monitor resolutions with default browser zoom.

The way it breaks is by the task blocks becoming hidden, even if scrolling the task ID + task blocks div all the way to the right:

The only way to see the task blocks again is by either zooming out on the browser (which makes everything too small to read), or by using a bigger monitor, or by expanding the browser window over a multi-monitor setup.

What you think should happen instead?

The blocks should not become hidden when scrolling all the way to the right. In fact, I think it's a bad thing that they disappear at all.

I think a better solution here would be to make the task instance blocks not live in the same div as the task IDs. That way, you would be able to resize/scroll through the task IDs, the task blocks, and the details/log divs each individually.

How to reproduce

Put this DAG in your Airflow instance:

from airflow import DAG
from airflow.operators.empty import EmptyOperator
from datetime import datetime, timedelta


default_args = {
    "owner": "airflow",
    "depends_on_past": False,
    "start_date": datetime(2025, 1, 29),
    "email_on_failure": False,
    "email_on_retry": False,
    "retries": 1,
    "retry_delay": timedelta(minutes=5),
}

dag = DAG(
    "dag_with_long_task_id",
    default_args=default_args,
    description="A DAG with a single task having a 250-character task ID",
    schedule_interval=timedelta(days=1),
)

task_with_long_id = EmptyOperator(
    task_id=250 * "a",
    dag=dag,
)

Operating System

macOS 15.2 (24C101)

Versions of Apache Airflow Providers

No response

Deployment

Other Docker-based deployment

Deployment details

No response

Anything else?

No response

Are you willing to submit PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct

[potiuk]

We are completely rewriting Airflow 3 UI and it is unlikely anyone will be looking at similar edge cases in Airflow 2. I suggest to look if similar problem will happen in Airflow 3 and report it there.