From d23e5f18c30db71f8a9dbdae83748e2c6ce5af76 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Mon, 5 Aug 2024 18:39:19 +0530
Subject: [PATCH] Added max-height to innerlist to get scrolling behaviour
 (#6541)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #6538



https://github.com/user-attachments/assets/c9ecf96d-9d37-4a91-a08e-e0f882ecea62

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
---
 .../command-menu/components/CommandMenu.tsx    | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
index 0b7ce97ee..55596bb42 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
@@ -35,6 +35,10 @@ import { Avatar, IconNotes, IconSparkles, IconX, isDefined } from 'twenty-ui';
 import { getLogoUrlFromDomainName } from '~/utils';
 import { generateILikeFiltersForCompositeFields } from '~/utils/array/generateILikeFiltersForCompositeFields';
 
+const SEARCH_BAR_HEIGHT = 56;
+const SEARCH_BAR_PADDING = 3;
+const MOBILE_NAVIGATION_BAR_HEIGHT = 64;
+
 const StyledCommandMenu = styled.div`
   background: ${({ theme }) => theme.background.secondary};
   border-left: 1px solid ${({ theme }) => theme.border.color.medium};
@@ -59,12 +63,12 @@ const StyledInputContainer = styled.div`
 
   display: flex;
   font-size: ${({ theme }) => theme.font.size.lg};
-  height: 56px;
+  height: ${SEARCH_BAR_HEIGHT}px;
   margin: 0;
   outline: none;
   position: relative;
 
-  padding: 0 ${({ theme }) => theme.spacing(3)};
+  padding: 0 ${({ theme }) => theme.spacing(SEARCH_BAR_PADDING)};
 `;
 
 const StyledInput = styled.input`
@@ -99,7 +103,13 @@ const StyledList = styled.div`
   transition-property: height;
 `;
 
-const StyledInnerList = styled.div`
+const StyledInnerList = styled.div<{ isMobile: boolean }>`
+  max-height: ${({ isMobile }) =>
+    isMobile
+      ? `calc(100dvh - ${SEARCH_BAR_HEIGHT}px - ${
+          SEARCH_BAR_PADDING * 2
+        }px - ${MOBILE_NAVIGATION_BAR_HEIGHT}px)`
+      : `calc(100dvh - ${SEARCH_BAR_HEIGHT}px - ${SEARCH_BAR_PADDING * 2}px)`};
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(2)};
   padding-top: ${({ theme }) => theme.spacing(1)};
@@ -340,7 +350,7 @@ export const CommandMenu = () => {
           </StyledInputContainer>
           <StyledList>
             <ScrollWrapper>
-              <StyledInnerList>
+              <StyledInnerList isMobile={isMobile}>
                 <SelectableList
                   selectableListId="command-menu-list"
                   selectableItemIdArray={selectableItemIds}