Scrolling issues on DAG page

[joeknize-bc]

Apache Airflow version

2.7.0

What happened

When on a DAG page, there's an issue with scrolling behavior on the Grid and Gantt tabs:

While my pointer is over the grid, the entire page should scroll once you get to the bottom of the grid, but instead I cannot scroll any further. This means that not only can't I get to the bottom of the page (where the Aiflow version, etc., is), but I can't even see the bottom of the grid if there are enough rows.

Details, Graph, and Code tabs scroll fine.

Important to note - this seems to only happen when there are enough DAG runs to require horizontal scrolling to be activated.

What you think should happen instead

Instead of stopping here:

I should be able to scroll all the way down to here:

How to reproduce

You should be able to see this behavior with any DAG that has enough DAG runs to cause the horizontal scroll bar to appear. I was able to replicate it with this DAG and triggering it 10 times. I have the vertical divider moved almost all the way to the left.

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

with DAG(
        dag_id='bad_scrolling',
        default_args={'start_date': datetime(2023, 8, 23, 14, 0, 0)},
) as dag:
    t1 = EmptyOperator(
        task_id='fairly_long_name_here'
    )

Operating System

Debian GNU/Linux 11 (bullseye)

Versions of Apache Airflow Providers

apache-airflow-providers-celery==3.3.2
apache-airflow-providers-cncf-kubernetes==7.4.2
apache-airflow-providers-common-sql==1.7.0
apache-airflow-providers-datadog==3.3.1
apache-airflow-providers-elasticsearch==5.0.0
apache-airflow-providers-ftp==3.5.0
apache-airflow-providers-google==10.6.0
apache-airflow-providers-http==4.5.0
apache-airflow-providers-imap==3.3.0
apache-airflow-providers-microsoft-azure==6.2.4
apache-airflow-providers-postgres==5.6.0
apache-airflow-providers-redis==3.3.1
apache-airflow-providers-salesforce==5.4.1
apache-airflow-providers-slack==7.3.2
apache-airflow-providers-snowflake==4.4.2
apache-airflow-providers-sqlite==3.4.3

Deployment

Astronomer

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]

cc: @bbovenzi to drag your attention :)