Skip to content

Comments

Fix sidebar visibility issue when main content exceeds viewport height#59660

Merged
bbovenzi merged 1 commit intoapache:mainfrom
choo121600:fix/sidebar-visibility
Jan 8, 2026
Merged

Fix sidebar visibility issue when main content exceeds viewport height#59660
bbovenzi merged 1 commit intoapache:mainfrom
choo121600:fix/sidebar-visibility

Conversation

@choo121600
Copy link
Member

In responsive layouts, when the main content height exceeds the viewport height, users had to scroll the entire page to access bottom elements of the fixed sidebar, making navigation difficult.

Change

The main content area in BaseLayout.tsx was set to h="100vh" without overflow handling.

Added overflowY="auto" to the main content container
--> Main content scrolls within its own container when it exceeds viewport height

Before

Screen.Recording.2025-12-20.at.1.31.27.PM.mov

After

Screen.Recording.2025-12-20.at.1.32.07.PM.mov

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Dec 20, 2025
Copy link
Contributor

@bbovenzi bbovenzi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What browser are you experiencing this issue? Code looks good but I'd like to replicate this before we merge.

@choo121600
Copy link
Member Author

With many Dags on the Dags page, the layout appears like this when responsive mode
I’m using the Arc browser, and the issue can be reproduced in Chrome as well.

Screen.Recording.2026-01-07.at.10.45.34.PM.mov
Screen.Recording.2026-01-07.at.10.47.20.PM.mov

Copy link
Contributor

@bbovenzi bbovenzi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha. Thanks!

@bbovenzi bbovenzi added the backport-to-v3-1-test Mark PR with this label to backport to v3-1-test branch label Jan 8, 2026
@bbovenzi bbovenzi modified the milestones: Airflow 3.1.7, Airflow 3.1.6 Jan 8, 2026
@bbovenzi bbovenzi merged commit b2962a3 into apache:main Jan 8, 2026
76 checks passed
github-actions bot pushed a commit that referenced this pull request Jan 8, 2026
…ewport height (#59660)

(cherry picked from commit b2962a3)

Co-authored-by: Yeonguk Choo <choo121600@gmail.com>
@github-actions
Copy link

github-actions bot commented Jan 8, 2026

Backport successfully created: v3-1-test

Status Branch Result
v3-1-test PR Link

bbovenzi pushed a commit that referenced this pull request Jan 8, 2026
…ewport height (#59660) (#60286)

(cherry picked from commit b2962a3)

Co-authored-by: Yeonguk Choo <choo121600@gmail.com>
stegololz pushed a commit to stegololz/airflow that referenced this pull request Jan 9, 2026
ephraimbuddy pushed a commit that referenced this pull request Jan 13, 2026
…ewport height (#59660) (#60286)

(cherry picked from commit b2962a3)

Co-authored-by: Yeonguk Choo <choo121600@gmail.com>
ephraimbuddy pushed a commit that referenced this pull request Jan 14, 2026
…ewport height (#59660) (#60286)

(cherry picked from commit b2962a3)

Co-authored-by: Yeonguk Choo <choo121600@gmail.com>
ephraimbuddy pushed a commit that referenced this pull request Jan 16, 2026
…ewport height (#59660) (#60286)

(cherry picked from commit b2962a3)

Co-authored-by: Yeonguk Choo <choo121600@gmail.com>
jhgoebbert pushed a commit to jhgoebbert/airflow_Owen-CH-Leung that referenced this pull request Feb 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers. backport-to-v3-1-test Mark PR with this label to backport to v3-1-test branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants