♻️ Change overflow:scroll to overflow:auto

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;

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"

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"

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}

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}

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}

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>

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"

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"

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"
+        overflowY="auto"
-        className="hide-scrollbar"
       >
         <Flex justifyContent="flex-end">
           <Tooltip

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"

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"

apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx

@@ -27,13 +27,7 @@ export const ApiPreviewInstructions = (props: StackProps) => {
 }`
 
   return (
-    <Stack
+    <Stack spacing={10} overflowY="auto" w="full" {...props}>
-      spacing={10}
-      overflowY="scroll"
-      className="hide-scrollbar"
-      w="full"
-      {...props}
-    >
       <OrderedList spacing={6} px="1">
         <ListItem>
           All your requests need to be authenticated with an API token.{' '}

apps/builder/src/features/preview/components/WhatsAppPreviewInstructions.tsx

@@ -68,8 +68,7 @@ export const WhatsAppPreviewInstructions = (props: StackProps) => {
     <Stack
       as="form"
       spacing={4}
-      overflowY="scroll"
+      overflowY="auto"
-      className="hide-scrollbar"
       w="full"
       px="1"
       onSubmit={sendWhatsAppPreviewStartMessage}

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"
           >

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));`}

apps/builder/src/features/results/components/table/TableSettingsButton.tsx

@@ -68,13 +68,7 @@ const TableSettingsMenu = ({
   switch (selectedMenu) {
     case 'columnSettings':
       return (
-        <PopoverBody
+        <PopoverBody as={Stack} spacing="4" p="4" maxH="450px" overflowY="auto">
-          as={Stack}
-          spacing="4"
-          p="4"
-          maxH="450px"
-          overflowY="scroll"
-        >
           <ColumnSettings
             resultHeader={resultHeader}
             columnVisibility={columnVisibility}

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">

apps/builder/src/features/templates/components/TemplatesModal.tsx

@@ -86,8 +86,7 @@ export const TemplatesModal = ({
             borderRightWidth={1}
             justify="space-between"
             flexShrink={0}
-            overflowY="scroll"
+            overflowY="auto"
-            className="hide-scrollbar"
           >
             <Stack spacing={5}>
               <Stack spacing={2}>

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"
     >

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>

apps/builder/src/features/workspace/components/WorkspaceSettingsModal.tsx

@@ -139,8 +139,7 @@ export const WorkspaceSettingsModal = ({
                   size="sm"
                   justifyContent="flex-start"
                   pl="4"
-                  overflow="scroll"
+                  overflow="auto"
-                  className="hide-scrollbar"
                 >
                   {t('workspace.settings.modal.menu.billingAndUsage.label')}
                 </Button>