From ab010657b2c9e5ff8ade643c136d8fabbadd72bb Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Thu, 25 Jan 2024 16:35:16 +0100
Subject: [PATCH] :recycle: Change overflow:scroll to overflow:auto

---
 apps/builder/src/assets/styles/custom.css             | 11 -----------
 apps/builder/src/components/DropdownList.tsx          |  2 +-
 .../src/components/ImageUploadContent/GiphyPicker.tsx |  2 +-
 .../src/components/ImageUploadContent/IconPicker.tsx  |  2 +-
 .../components/ImageUploadContent/UnsplashPicker.tsx  |  2 +-
 .../ImageUploadContent/emoji/EmojiSearchableList.tsx  |  2 +-
 .../src/components/inputs/AutocompleteInput.tsx       |  2 +-
 apps/builder/src/components/inputs/Select.tsx         |  2 +-
 .../src/components/inputs/VariableSearchInput.tsx     |  2 +-
 .../src/features/account/components/MyAccountForm.tsx |  2 +-
 .../inputs/buttons/components/ButtonsItemNode.tsx     |  2 +-
 .../components/PictureChoiceItemNode.tsx              |  2 +-
 .../logic/condition/components/ConditionItemNode.tsx  |  2 +-
 .../collaboration/components/CollaborationList.tsx    |  2 +-
 .../credentials/components/CredentialsDropdown.tsx    |  2 +-
 .../components/CustomDomainsDropdown.tsx              |  2 +-
 .../src/features/editor/components/BlocksSideBar.tsx  |  3 +--
 .../credentials/ForgedCredentialsDropdown.tsx         |  2 +-
 .../components/nodes/block/SettingsPopoverContent.tsx |  2 +-
 .../preview/components/ApiPreviewInstructions.tsx     |  8 +-------
 .../components/WhatsAppPreviewInstructions.tsx        |  3 +--
 .../src/features/results/components/LogsModal.tsx     |  2 +-
 .../results/components/table/ResultsTable.tsx         |  2 +-
 .../results/components/table/TableSettingsButton.tsx  |  8 +-------
 .../features/settings/components/SettingsSideMenu.tsx |  2 +-
 .../features/templates/components/TemplatesModal.tsx  |  3 +--
 .../src/features/theme/components/ThemeSideMenu.tsx   |  2 +-
 .../features/workspace/components/AddMemberForm.tsx   |  2 +-
 .../workspace/components/WorkspaceSettingsModal.tsx   |  3 +--
 29 files changed, 28 insertions(+), 55 deletions(-)

diff --git a/apps/builder/src/assets/styles/custom.css b/apps/builder/src/assets/styles/custom.css
index 4b40a0d77..1532d2068 100644
--- a/apps/builder/src/assets/styles/custom.css
+++ b/apps/builder/src/assets/styles/custom.css
@@ -6,17 +6,6 @@
   cursor: grabbing !important;
 }
 
-/* Hide scrollbar for Chrome, Safari and Opera */
-.hide-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.hide-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
 /* * {
   outline: 1px solid #f00 !important;
   opacity: 1 !important;
diff --git a/apps/builder/src/components/DropdownList.tsx b/apps/builder/src/components/DropdownList.tsx
index 8915035bf..849600d82 100644
--- a/apps/builder/src/components/DropdownList.tsx
+++ b/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}
diff --git a/apps/builder/src/components/ImageUploadContent/GiphyPicker.tsx b/apps/builder/src/components/ImageUploadContent/GiphyPicker.tsx
index afdcf79fa..798f63775 100644
--- a/apps/builder/src/components/ImageUploadContent/GiphyPicker.tsx
+++ b/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) => {
diff --git a/apps/builder/src/components/ImageUploadContent/IconPicker.tsx b/apps/builder/src/components/ImageUploadContent/IconPicker.tsx
index a6ba7d236..a1ed01541 100644
--- a/apps/builder/src/components/ImageUploadContent/IconPicker.tsx
+++ b/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">
diff --git a/apps/builder/src/components/ImageUploadContent/UnsplashPicker.tsx b/apps/builder/src/components/ImageUploadContent/UnsplashPicker.tsx
index 572176920..debfff906 100644
--- a/apps/builder/src/components/ImageUploadContent/UnsplashPicker.tsx
+++ b/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) => (
diff --git a/apps/builder/src/components/ImageUploadContent/emoji/EmojiSearchableList.tsx b/apps/builder/src/components/ImageUploadContent/emoji/EmojiSearchableList.tsx
index 46cbad587..075632ada 100644
--- a/apps/builder/src/components/ImageUploadContent/emoji/EmojiSearchableList.tsx
+++ b/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">
diff --git a/apps/builder/src/components/inputs/AutocompleteInput.tsx b/apps/builder/src/components/inputs/AutocompleteInput.tsx
index 8e85cf562..02958731c 100644
--- a/apps/builder/src/components/inputs/AutocompleteInput.tsx
+++ b/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"
diff --git a/apps/builder/src/components/inputs/Select.tsx b/apps/builder/src/components/inputs/Select.tsx
index 63b6bdc47..2aa522dcb 100644
--- a/apps/builder/src/components/inputs/Select.tsx
+++ b/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"
diff --git a/apps/builder/src/components/inputs/VariableSearchInput.tsx b/apps/builder/src/components/inputs/VariableSearchInput.tsx
index 7c7b4c254..a4a6bdbb4 100644
--- a/apps/builder/src/components/inputs/VariableSearchInput.tsx
+++ b/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"
diff --git a/apps/builder/src/features/account/components/MyAccountForm.tsx b/apps/builder/src/features/account/components/MyAccountForm.tsx
index 8979f01ea..bd8662968 100644
--- a/apps/builder/src/features/account/components/MyAccountForm.tsx
+++ b/apps/builder/src/features/account/components/MyAccountForm.tsx
@@ -28,7 +28,7 @@ export const MyAccountForm = () => {
   }
 
   return (
-    <Stack spacing="6" w="full" overflowY="scroll">
+    <Stack spacing="6" w="full" overflowY="auto">
       <HStack spacing={6}>
         <Avatar
           size="lg"
diff --git a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx
index d1fb5d31b..ca811f844 100644
--- a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx
+++ b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx
@@ -152,7 +152,7 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
           <PopoverArrow bgColor={arrowColor} />
           <PopoverBody
             py="6"
-            overflowY="scroll"
+            overflowY="auto"
             maxH="400px"
             shadow="lg"
             ref={ref}
diff --git a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemNode.tsx b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemNode.tsx
index d6cba62e3..498deb643 100644
--- a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemNode.tsx
+++ b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemNode.tsx
@@ -127,7 +127,7 @@ export const PictureChoiceItemNode = ({
           <PopoverArrow />
           <PopoverBody
             py="6"
-            overflowY="scroll"
+            overflowY="auto"
             maxH="400px"
             shadow="lg"
             ref={ref}
diff --git a/apps/builder/src/features/blocks/logic/condition/components/ConditionItemNode.tsx b/apps/builder/src/features/blocks/logic/condition/components/ConditionItemNode.tsx
index 0cb6133a2..ce7e51769 100644
--- a/apps/builder/src/features/blocks/logic/condition/components/ConditionItemNode.tsx
+++ b/apps/builder/src/features/blocks/logic/condition/components/ConditionItemNode.tsx
@@ -109,7 +109,7 @@ export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
           <PopoverArrow />
           <PopoverBody
             py="6"
-            overflowY="scroll"
+            overflowY="auto"
             maxH="400px"
             shadow="lg"
             ref={ref}
diff --git a/apps/builder/src/features/collaboration/components/CollaborationList.tsx b/apps/builder/src/features/collaboration/components/CollaborationList.tsx
index 9f3c3189f..40b9729bc 100644
--- a/apps/builder/src/features/collaboration/components/CollaborationList.tsx
+++ b/apps/builder/src/features/collaboration/components/CollaborationList.tsx
@@ -241,7 +241,7 @@ const CollaborationTypeMenuButton = ({
       <ReadableCollaborationType type={type} />
     </MenuButton>
     <MenuList minW={0}>
-      <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
+      <Stack maxH={'35vh'} overflowY="auto" spacing="0">
         <MenuItem onClick={() => onChange(CollaborationType.READ)}>
           <ReadableCollaborationType type={CollaborationType.READ} />
         </MenuItem>
diff --git a/apps/builder/src/features/credentials/components/CredentialsDropdown.tsx b/apps/builder/src/features/credentials/components/CredentialsDropdown.tsx
index 6cc363463..fc9fd9cb1 100644
--- a/apps/builder/src/features/credentials/components/CredentialsDropdown.tsx
+++ b/apps/builder/src/features/credentials/components/CredentialsDropdown.tsx
@@ -116,7 +116,7 @@ export const CredentialsDropdown = ({
         </Text>
       </MenuButton>
       <MenuList>
-        <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
+        <Stack maxH={'35vh'} overflowY="auto" spacing="0">
           {defaultCredentialLabel && (
             <MenuItem
               maxW="500px"
diff --git a/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx b/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx
index 0f1c0f372..e048e2505 100644
--- a/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx
+++ b/apps/builder/src/features/customDomains/components/CustomDomainsDropdown.tsx
@@ -103,7 +103,7 @@ export const CustomDomainsDropdown = ({
         </Text>
       </MenuButton>
       <MenuList maxW="500px" shadow="lg">
-        <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
+        <Stack maxH={'35vh'} overflowY="auto" spacing="0">
           {(data?.customDomains ?? []).map((customDomain) => (
             <Button
               role="menuitem"
diff --git a/apps/builder/src/features/editor/components/BlocksSideBar.tsx b/apps/builder/src/features/editor/components/BlocksSideBar.tsx
index df9e75022..12f747a6d 100644
--- a/apps/builder/src/features/editor/components/BlocksSideBar.tsx
+++ b/apps/builder/src/features/editor/components/BlocksSideBar.tsx
@@ -112,8 +112,7 @@ export const BlocksSideBar = () => {
         bgColor={useColorModeValue('white', 'gray.900')}
         spacing={6}
         userSelect="none"
-        overflowY="scroll"
-        className="hide-scrollbar"
+        overflowY="auto"
       >
         <Flex justifyContent="flex-end">
           <Tooltip
diff --git a/apps/builder/src/features/forge/components/credentials/ForgedCredentialsDropdown.tsx b/apps/builder/src/features/forge/components/credentials/ForgedCredentialsDropdown.tsx
index d8725224a..4786e1e6a 100644
--- a/apps/builder/src/features/forge/components/credentials/ForgedCredentialsDropdown.tsx
+++ b/apps/builder/src/features/forge/components/credentials/ForgedCredentialsDropdown.tsx
@@ -134,7 +134,7 @@ export const ForgedCredentialsDropdown = ({
         </Text>
       </MenuButton>
       <MenuList>
-        <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
+        <Stack maxH={'35vh'} overflowY="auto" spacing="0">
           {data?.credentials.map((credentials) => (
             <MenuItem
               role="menuitem"
diff --git a/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx b/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
index cf8ff7ba7..700836d91 100644
--- a/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
+++ b/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
@@ -69,7 +69,7 @@ export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
         <PopoverArrow bgColor={arrowColor} />
         <PopoverBody
           py="3"
-          overflowY="scroll"
+          overflowY="auto"
           maxH="400px"
           ref={ref}
           shadow="lg"
diff --git a/apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx b/apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx
index 394c83e61..10b79aeee 100644
--- a/apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx
+++ b/apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx
@@ -27,13 +27,7 @@ export const ApiPreviewInstructions = (props: StackProps) => {
 }`
 
   return (
-    <Stack
-      spacing={10}
-      overflowY="scroll"
-      className="hide-scrollbar"
-      w="full"
-      {...props}
-    >
+    <Stack spacing={10} overflowY="auto" w="full" {...props}>
       <OrderedList spacing={6} px="1">
         <ListItem>
           All your requests need to be authenticated with an API token.{' '}
diff --git a/apps/builder/src/features/preview/components/WhatsAppPreviewInstructions.tsx b/apps/builder/src/features/preview/components/WhatsAppPreviewInstructions.tsx
index 2a6e20a70..652a6dca9 100644
--- a/apps/builder/src/features/preview/components/WhatsAppPreviewInstructions.tsx
+++ b/apps/builder/src/features/preview/components/WhatsAppPreviewInstructions.tsx
@@ -68,8 +68,7 @@ export const WhatsAppPreviewInstructions = (props: StackProps) => {
     <Stack
       as="form"
       spacing={4}
-      overflowY="scroll"
-      className="hide-scrollbar"
+      overflowY="auto"
       w="full"
       px="1"
       onSubmit={sendWhatsAppPreviewStartMessage}
diff --git a/apps/builder/src/features/results/components/LogsModal.tsx b/apps/builder/src/features/results/components/LogsModal.tsx
index 307c6df6f..a84c6760b 100644
--- a/apps/builder/src/features/results/components/LogsModal.tsx
+++ b/apps/builder/src/features/results/components/LogsModal.tsx
@@ -71,7 +71,7 @@ const LogCard = ({ log }: { log: Log }) => {
           </AccordionButton>
           <AccordionPanel
             as="pre"
-            overflow="scroll"
+            overflow="auto"
             borderWidth="1px"
             borderRadius="md"
           >
diff --git a/apps/builder/src/features/results/components/table/ResultsTable.tsx b/apps/builder/src/features/results/components/table/ResultsTable.tsx
index 297a2c4dd..3595f6699 100644
--- a/apps/builder/src/features/results/components/table/ResultsTable.tsx
+++ b/apps/builder/src/features/results/components/table/ResultsTable.tsx
@@ -232,7 +232,7 @@ export const ResultsTable = ({
       </HStack>
       <Box
         ref={tableWrapper}
-        overflow="scroll"
+        overflow="auto"
         rounded="md"
         data-testid="results-table"
         backgroundImage={`linear-gradient(to right, ${background}, ${background}), linear-gradient(to right, ${background}, ${background}),linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));`}
diff --git a/apps/builder/src/features/results/components/table/TableSettingsButton.tsx b/apps/builder/src/features/results/components/table/TableSettingsButton.tsx
index 9eae8769c..d90cabde8 100644
--- a/apps/builder/src/features/results/components/table/TableSettingsButton.tsx
+++ b/apps/builder/src/features/results/components/table/TableSettingsButton.tsx
@@ -68,13 +68,7 @@ const TableSettingsMenu = ({
   switch (selectedMenu) {
     case 'columnSettings':
       return (
-        <PopoverBody
-          as={Stack}
-          spacing="4"
-          p="4"
-          maxH="450px"
-          overflowY="scroll"
-        >
+        <PopoverBody as={Stack} spacing="4" p="4" maxH="450px" overflowY="auto">
           <ColumnSettings
             resultHeader={resultHeader}
             columnVisibility={columnVisibility}
diff --git a/apps/builder/src/features/settings/components/SettingsSideMenu.tsx b/apps/builder/src/features/settings/components/SettingsSideMenu.tsx
index 694565a19..300399bc3 100644
--- a/apps/builder/src/features/settings/components/SettingsSideMenu.tsx
+++ b/apps/builder/src/features/settings/components/SettingsSideMenu.tsx
@@ -56,7 +56,7 @@ export const SettingsSideMenu = () => {
       borderRightWidth={1}
       pt={10}
       spacing={10}
-      overflowY="scroll"
+      overflowY="auto"
       pb="20"
     >
       <Heading fontSize="xl" textAlign="center">
diff --git a/apps/builder/src/features/templates/components/TemplatesModal.tsx b/apps/builder/src/features/templates/components/TemplatesModal.tsx
index 59c9d8fe2..0a558b4b0 100644
--- a/apps/builder/src/features/templates/components/TemplatesModal.tsx
+++ b/apps/builder/src/features/templates/components/TemplatesModal.tsx
@@ -86,8 +86,7 @@ export const TemplatesModal = ({
             borderRightWidth={1}
             justify="space-between"
             flexShrink={0}
-            overflowY="scroll"
-            className="hide-scrollbar"
+            overflowY="auto"
           >
             <Stack spacing={5}>
               <Stack spacing={2}>
diff --git a/apps/builder/src/features/theme/components/ThemeSideMenu.tsx b/apps/builder/src/features/theme/components/ThemeSideMenu.tsx
index 7e276f037..03e9239cc 100644
--- a/apps/builder/src/features/theme/components/ThemeSideMenu.tsx
+++ b/apps/builder/src/features/theme/components/ThemeSideMenu.tsx
@@ -65,7 +65,7 @@ export const ThemeSideMenu = () => {
       borderRightWidth={1}
       pt={10}
       spacing={10}
-      overflowY="scroll"
+      overflowY="auto"
       pb="20"
       position="relative"
     >
diff --git a/apps/builder/src/features/workspace/components/AddMemberForm.tsx b/apps/builder/src/features/workspace/components/AddMemberForm.tsx
index 876422bae..d9905d3cf 100644
--- a/apps/builder/src/features/workspace/components/AddMemberForm.tsx
+++ b/apps/builder/src/features/workspace/components/AddMemberForm.tsx
@@ -98,7 +98,7 @@ const WorkspaceRoleMenuButton = ({
         {convertWorkspaceRoleToReadable(role)}
       </MenuButton>
       <MenuList minW={0}>
-        <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
+        <Stack maxH={'35vh'} overflowY="auto" spacing="0">
           <MenuItem onClick={() => onChange(WorkspaceRole.ADMIN)}>
             {convertWorkspaceRoleToReadable(WorkspaceRole.ADMIN)}
           </MenuItem>
diff --git a/apps/builder/src/features/workspace/components/WorkspaceSettingsModal.tsx b/apps/builder/src/features/workspace/components/WorkspaceSettingsModal.tsx
index 5edd23bb7..7f0589fb4 100644
--- a/apps/builder/src/features/workspace/components/WorkspaceSettingsModal.tsx
+++ b/apps/builder/src/features/workspace/components/WorkspaceSettingsModal.tsx
@@ -139,8 +139,7 @@ export const WorkspaceSettingsModal = ({
                   size="sm"
                   justifyContent="flex-start"
                   pl="4"
-                  overflow="scroll"
-                  className="hide-scrollbar"
+                  overflow="auto"
                 >
                   {t('workspace.settings.modal.menu.billingAndUsage.label')}
                 </Button>