Fix missing menu border padding

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropDownMenuItemsScrollContainer.tsx

@@ -0,0 +1,44 @@
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import styled from '@emotion/styled';
+import { PropsWithChildren, useId } from 'react';
+
+const StyledScrollWrapper = styled(ScrollWrapper)`
+  box-sizing: border-box;
+  padding-inline: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+`;
+
+const StyledPaddingContainer = styled.div`
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledPaddingBlockContainer = styled.div`
+  overflow: auto;
+  padding-block: ${({ theme }) => theme.spacing(1)};
+`;
+
+type DropDownMenuItemsScrollContainerProps = PropsWithChildren<{
+  hasMaxHeight?: boolean;
+  scrollable?: boolean;
+}>;
+export const DropDownMenuItemsScrollContainer = ({
+  hasMaxHeight = false,
+  scrollable = true,
+  children,
+}: DropDownMenuItemsScrollContainerProps) => {
+  const id = useId();
+
+  if (scrollable || hasMaxHeight) {
+    return (
+      <StyledPaddingBlockContainer>
+        <StyledScrollWrapper
+          componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
+        >
+          {children}
+        </StyledScrollWrapper>
+      </StyledPaddingBlockContainer>
+    );
+  }
+
+  return <StyledPaddingContainer>{children}</StyledPaddingContainer>;
+};

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -1,23 +1,19 @@
-import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { DropDownMenuItemsScrollContainer } from '@/ui/layout/dropdown/components/DropDownMenuItemsScrollContainer';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useId } from 'react';
+import { PropsWithChildren } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
 const StyledDropdownMenuItemsExternalContainer = styled.div<{
   hasMaxHeight?: boolean;
   width: number | 'auto';
 }>`
-  --padding: ${({ theme }) => theme.spacing(1)};
-
   align-items: flex-start;
   display: flex;
 
   flex-direction: column;
   max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '168px' : 'none')};
 
-  padding: var(--padding);
-
   ${({ width }) =>
     isDefined(width) &&
     css`
@@ -35,60 +31,34 @@ const StyledDropdownMenuItemsInternalContainer = styled.div`
   width: 100%;
 `;
 
-const StyledScrollWrapper = styled(ScrollWrapper)`
-  width: 100%;
-`;
-
+type DropdownMenuItemsContainerProps = PropsWithChildren<{
+  hasMaxHeight?: boolean;
+  className?: string;
+  scrollable?: boolean;
+  width?: number | 'auto';
+}>;
 // TODO: refactor this, the dropdown should handle the max height behavior + scroll with the size middleware
 // We should instead create a DropdownMenuItemsContainerScrollable or take for granted that it is the default behavior
 export const DropdownMenuItemsContainer = ({
   children,
   hasMaxHeight,
   className,
   width = 200,
-  scrollable = true,
-}: {
-  children: React.ReactNode;
-  hasMaxHeight?: boolean;
-  className?: string;
-  scrollable?: boolean;
-  width?: number | 'auto';
-}) => {
-  const id = useId();
-
-  return scrollable !== true ? (
+  scrollable,
+}: DropdownMenuItemsContainerProps) => (
+  <DropDownMenuItemsScrollContainer
+    hasMaxHeight={hasMaxHeight}
+    scrollable={scrollable}
+  >
     <StyledDropdownMenuItemsExternalContainer
-      hasMaxHeight={hasMaxHeight}
       className={className}
       role="listbox"
       width={width}
+      hasMaxHeight={hasMaxHeight}
     >
-      {hasMaxHeight ? (
-        <StyledScrollWrapper
-          componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
-        >
-          <StyledDropdownMenuItemsInternalContainer>
-            {children}
-          </StyledDropdownMenuItemsInternalContainer>
-        </StyledScrollWrapper>
-      ) : (
-        <StyledDropdownMenuItemsInternalContainer>
-          {children}
-        </StyledDropdownMenuItemsInternalContainer>
-      )}
+      <StyledDropdownMenuItemsInternalContainer>
+        {children}
+      </StyledDropdownMenuItemsInternalContainer>
     </StyledDropdownMenuItemsExternalContainer>
-  ) : (
-    <ScrollWrapper componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}>
-      <StyledDropdownMenuItemsExternalContainer
-        hasMaxHeight={hasMaxHeight}
-        className={className}
-        role="listbox"
-        width={width}
-      >
-        <StyledDropdownMenuItemsInternalContainer>
-          {children}
-        </StyledDropdownMenuItemsInternalContainer>
-      </StyledDropdownMenuItemsExternalContainer>
-    </ScrollWrapper>
-  );
-};
+  </DropDownMenuItemsScrollContainer>
+);