Unnecessary scrollbars in grid view

[tanelk]

Apache Airflow version

2.5.0

What happened

Compare the same DAG grid view in 2.4.3: (everything is scrolled using the "main" scrollbar of the window)

and in 2.5.0 (and 2.5.1) (left and right side of the grid have their own scrollbars):

It was much more ergonomic previously when only the main scrollbar was used.

I think the relevant change was in #27560, where maxHeight={offsetHeight} was added to some places.

Is this the intended way the grid view should look like or did happen as an accident?

I tried to look around in the developer tools and it seems like removing the max-height from this element restores the old look: div#react-container div div.c-1rr4qq7 div.c-k008qs div.c-19srwsc div.c-scptso div.c-l7cpmp. Well it does for the left side of the grid view. Similar change has to be done for some other divs also.

What you think should happen instead

No response

How to reproduce

No response

Operating System

Linux

Versions of Apache Airflow Providers

No response

Deployment

Virtualenv installation

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

[tanelk]

@bbovenzi I think you did this change - I'd like to argue, that it was better before. But perhaps I do not understand others usecases.

[bbovenzi]

I've been back and forth on the best scrolling solution for the grid view because the right or left side could be significantly longer than the other. This was most notable with logs. Scrolling the entire window would mean half the page would just be blank and you'd lose some context.
I'd also like to make progress on cleaning up a lot of the menus above the grid view, so it all fits better in a typical window height.

[JoepvandenHoven-Bluemine]

Regardless of the best solution it seems to have slipped in in a pull request that was supposed to make the grid width adjustable and also "fix" the logs height (i.e. made it depend on the screen height, which is arguably better than just using a fixed height). I think the change of the grid height, if any is indeed necessary, shouldn't have been part of the same pull request as well.

For what it's worth I find the current solution hard to use, it makes it harder to see the status of the dag on the main status page. It's especially bad on small screens, since the max-height for the logs and the grid-view are set separately the grid view can become a lot smaller than the log view next to it. It makes it really hard to see what's going on.

[bbovenzi]

Very fair point. I'll play around with it again for 2.5.2

[iuga]

My 2 cents:
As strong users of Airflow, we often have complex DAGs with thousands of tasks, and the Grid View has been a crucial tool for us to manage and optimize how we consume information. In 2.4.x, we were able to take advantage of the scroll bar to maximize the information displayed on the screen. However, with the changes in 2.5.x we are only being able to view around 9 rows at a time, and it significantly restricts our ability to quickly access the information we need. Hope our use case can provide you more insights to improve the scrolling solution:

2.4.x

2.5.x