♻️ Change overflow:scroll to overflow:auto

apps/builder/src/components/DropdownList.tsx

@@ -78,7 +78,7 @@ export const DropdownList = <T extends readonly any[]>({
         </MenuButton>
         <Portal>
           <MenuList maxW="500px" zIndex={1500}>
-            <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
+            <Stack maxH={'35vh'} overflowY="auto" spacing="0">
               {items.map((item) => (
                 <MenuItem
                   key={item as unknown as string}

apps/builder/src/components/ImageUploadContent/GiphyPicker.tsx

@@ -34,7 +34,7 @@ export const GiphyPicker = ({ onSubmit }: GiphySearchFormProps) => {
         />
         <GiphyLogo w="100px" />
       </Flex>
-      <Flex overflowY="scroll" maxH="400px">
+      <Flex overflowY="auto" maxH="400px">
         <Grid
           key={inputValue}
           onGifClick={(gif, e) => {

apps/builder/src/components/ImageUploadContent/IconPicker.tsx

@@ -115,7 +115,7 @@ export const IconPicker = ({ onIconSelected }: Props) => {
         <ColorPicker value={selectedColor} onColorChange={updateColor} />
       </HStack>
 
-      <Stack overflowY="scroll" maxH="350px" ref={scrollContainer} spacing={4}>
+      <Stack overflowY="auto" maxH="350px" ref={scrollContainer} spacing={4}>
         {recentIconNames.length > 0 && (
           <Stack>
             <Text fontSize="xs" color="gray.400" fontWeight="semibold" pl="2">

apps/builder/src/components/ImageUploadContent/UnsplashPicker.tsx

@@ -155,7 +155,7 @@ export const UnsplashPicker = ({ imageSize, onImageSelect }: Props) => {
           {error}
         </Alert>
       )}
-      <Stack overflowY="scroll" maxH="400px" ref={scrollContainer}>
+      <Stack overflowY="auto" maxH="400px" ref={scrollContainer}>
         {images.length > 0 && (
           <Grid templateColumns="repeat(3, 1fr)" columnGap={2} rowGap={3}>
             {images.map((image, index) => (

apps/builder/src/components/ImageUploadContent/emoji/EmojiSearchableList.tsx

@@ -110,7 +110,7 @@ export const EmojiSearchableList = ({
         placeholder={t('emojiList.searchInput.placeholder')}
         onChange={handleSearchChange}
       />
-      <Stack ref={scrollContainer} overflow="scroll" maxH="350px" spacing={4}>
+      <Stack ref={scrollContainer} overflowY="scroll" maxH="350px" spacing={4}>
         {recentEmojis.length > 0 && (
           <Stack>
             <Text fontSize="xs" color="gray.400" fontWeight="semibold" pl="2">

apps/builder/src/components/inputs/AutocompleteInput.tsx

@@ -181,7 +181,7 @@ export const AutocompleteInput = ({
             <Portal containerRef={parentModalRef}>
               <PopoverContent
                 maxH="35vh"
-                overflowY="scroll"
+                overflowY="auto"
                 role="menu"
                 w="inherit"
                 shadow="lg"

apps/builder/src/components/inputs/Select.tsx

@@ -217,7 +217,7 @@ export const Select = <T extends Item>({
         <Portal containerRef={parentModalRef}>
           <PopoverContent
             maxH="35vh"
-            overflowY="scroll"
+            overflowY="auto"
             role="menu"
             w="inherit"
             shadow="lg"

apps/builder/src/components/inputs/VariableSearchInput.tsx

@@ -233,7 +233,7 @@ export const VariableSearchInput = ({
           <Portal containerRef={parentModalRef}>
             <PopoverContent
               maxH="35vh"
-              overflowY="scroll"
+              overflowY="auto"
               role="menu"
               w="inherit"
               shadow="lg"