manish-m-pillai opened a new pull request, #4026: URL: https://github.com/apache/ambari/pull/4026
Ambari-26513 : When there are many components on the left side, there is no scrollbar Problem When the sidebar contains too many components, it previously did not scroll, causing the overflowed elements to be cut off and inaccessible. Solution: 1. Refactored the sidebar layout using Flexbox to ensure proper height management and scroll behavior: 2. Applied display: flex and flex-direction: column to .navigation-bar-container to lay out the sidebar in vertical sections. 3. Assigned max-height to .side-nav-header and .side-nav-footer to restrict their height. 4. Set max-height: calc(100vh - 110px) on .side-nav-menu to allow scrolling while reserving space for the header and footer. 5. Changed .side-nav-footer to use position: fixed so it stays at the bottom regardless of scroll. 6. Commented out conflicting position: absolute styles in .navigation-bar-fit-height. (I dont think it is required if it is I have commented out for safety). [Screencast from 2025-06-16 16-51-53.webm](https://github.com/user-attachments/assets/5d4a4414-07b9-4b0b-9759-d302e38dd155) [Screencast from 2025-06-16 17-11-45.webm](https://github.com/user-attachments/assets/d8f9ccb7-189c-449a-ab2b-97f1788f2604) Result: The sidebar now gracefully scrolls when content exceeds the visible area, ensuring all components are accessible at all times. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: dev-unsubscr...@ambari.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: dev-unsubscr...@ambari.apache.org For additional commands, e-mail: dev-h...@ambari.apache.org