-
Notifications
You must be signed in to change notification settings - Fork 2.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FIX] fix navigation overflow #7795
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
ObjectsMetaDataItemsWrapper
withoverflow-y: auto
inNavigationDrawerSectionForObjectMetadataItems.tsx
for vertical scrolling - Removed
flex-grow: 1
fromStyledNavigationDrawerItemContainer
inNavigationDrawerItem.tsx
to prevent items from expanding beyond screen size - Added
max-height
andoverflow
properties toStyledAnimatedContainer
andStyledItemsContainer
inNavigationDrawer.tsx
- Implemented
flex-shrink: 1
andoverflow: hidden
inNavigationDrawerSection.tsx
to 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
syntax: Missing semicolon at the end of the CSS property
flex-shrink: 1; | ||
overflow: hidden |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.