[FIX] fix navigation overflow #7795
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This pull request addresses the navigation overflow issue by implementing scrollable containers and adjusting styles in various components to enable vertical scrolling when items exceed the viewport height.
- Added
ObjectsMetaDataItemsWrapperwithoverflow-y: autoinNavigationDrawerSectionForObjectMetadataItems.tsxfor vertical scrolling - Removed
flex-grow: 1fromStyledNavigationDrawerItemContainerinNavigationDrawerItem.tsxto prevent items from expanding beyond screen size - Added
max-heightandoverflowproperties toStyledAnimatedContainerandStyledItemsContainerinNavigationDrawer.tsx - Implemented
flex-shrink: 1andoverflow: hiddeninNavigationDrawerSection.tsxto ensure proper scrolling behavior
5 file(s) reviewed, 6 comment(s)
Edit PR Review Bot Settings | Greptile
| const ObjectsMetaDataItemsWrapper = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: ${({ theme }) => theme.betweenSiblingsGap}; | ||
| width: 100%; | ||
| margin-bottom: ${({ theme }) => theme.spacing(3)}; | ||
| flex: 1; | ||
| overflow-y: auto; | ||
| `; |
There was a problem hiding this comment.
style: Consider adding a max-height property to ensure the container doesn't grow indefinitely
| <ObjectsMetaDataItemsWrapper> | ||
| {isNavigationSectionOpen && renderObjectMetadataItems()} | ||
| </ObjectsMetaDataItemsWrapper> |
There was a problem hiding this comment.
style: Ensure that the scrollable area doesn't interfere with other navigation elements when empty
| @@ -44,7 +44,7 @@ export const NavigationDrawerAnimatedCollapseWrapper = ({ | |||
| transition={{ | |||
| duration: theme.animation.duration.normal, | |||
| }} | |||
| > | |||
| > | |||
There was a problem hiding this comment.
style: There's an extra space at the end of this line
| @@ -6,6 +6,8 @@ const StyledSection = styled.div` | |||
| gap: ${({ theme }) => theme.betweenSiblingsGap}; | |||
| width: 100%; | |||
| margin-bottom: ${({ theme }) => theme.spacing(3)}; | |||
| flex-shrink: 1; | |||
| overflow: hidden | |||
There was a problem hiding this comment.
syntax: Missing semicolon at the end of the CSS property
| flex-shrink: 1; | ||
| overflow: hidden |
There was a problem hiding this comment.
style: Consider using overflow-y: auto instead of overflow: hidden to allow vertical scrolling while hiding horizontal overflow
|
@lucasbordeau the merging was blocked for some reason. Also, could you please assign appropriate OSS points to issue and PR Cheers! |
|
@Hitarthsheth07 you have lint issue (see CI) could you fix them? |
|
/award 300 |
|
Awarding Hitarthsheth07: 300 points 🕹️ Well done! Check out your new contribution on oss.gg/Hitarthsheth07 |
|
Thanks @Hitarthsheth07 for your contribution! |
|
@charlesBochet the ci has failed for CI-front. Is there a issue on my side or a server problem. Thanks. |
|
Thanks for checking it, it's great to see rigorous contributors :) You are good, the failing CIs are failing because of infra issues |
In [this PR (fix navigation overflow)](#7795) we introduced a regression, hidding the left-side animation with advanced settings: <img width="285" alt="Capture d’écran 2024-10-30 à 12 56 22" src="https://github.com/user-attachments/assets/46d7b1e5-4759-42e9-9bcb-aaa0fedfe542"> <img width="274" alt="Capture d’écran 2024-10-30 à 12 56 31" src="https://github.com/user-attachments/assets/d3c3d337-f6fc-4509-a920-4c2c7506f061">
FIX #7733
Fixes the overflow and responsive problem on large and small devices.
The 'Workspace' title is fixed and only links under it are scrolled when overflown.