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

Reply via email to