[FIX] slash-menu-height-fix #8327
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 PR modifies the DropdownMenu component to fix excessive vertical spacing in the slash menu by introducing height control through an isCustomSlashMenu prop.
- Added
isCustomSlashMenuboolean prop toDropdownMenuin/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsxto toggle betweenfit-contentand100%height - Implemented prop usage in
/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsxby settingisCustomSlashMenu={true} - Consider refactoring to use a more generic height control prop rather than slash-menu specific implementation for better maintainability
2 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile
| @@ -24,7 +24,7 @@ const StyledSlashMenu = styled.div` | |||
| export const CustomSlashMenu = (props: CustomSlashMenuProps) => { | |||
| return ( | |||
| <StyledSlashMenu> | |||
| <DropdownMenu style={{ zIndex: 2001 }}> | |||
| <DropdownMenu style={{ zIndex: 2001 }} isCustomSlashMenu={true}> | |||
There was a problem hiding this comment.
style: Consider adding a maxHeight prop to handle cases where the content might exceed the viewport height
| height: ${({ isCustomSlashMenu }) => | ||
| isCustomSlashMenu ? 'fit-content' : '100%'}; |
There was a problem hiding this comment.
style: Consider using a more generic prop name like fitContent instead of isCustomSlashMenu to make this feature reusable for other dropdown cases
| box-shadow: ${({ theme }) => theme.boxShadow.strong}; | ||
|
|
||
| display: flex; | ||
|
|
||
| height: 100%; | ||
| height: ${({ isCustomSlashMenu }) => | ||
| isCustomSlashMenu ? 'fit-content' : '100%'}; |
There was a problem hiding this comment.
@Hitarthsheth07 fit-content was not working everywhere?
There was a problem hiding this comment.
It does work everywhere, should I change it to fit-content
|
Thanks @Hitarthsheth07 for your contribution! |
FIX #8326
I've used the
height: fit-contentproperty just for customSlashMenu but I think it will work for all dropdown menu's.I tested it for a few and works fine, but not sure for edge cases.
Let me know if the height should be changed to
fir-content