♻️ Change overflow:scroll to overflow:auto

2024-01-25 16:35:16 +01:00
parent 0f245b8e57
commit ab010657b2
29 changed files with 28 additions and 55 deletions
--- 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;
--- 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}
--- 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) => {
--- 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">
--- 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) => (
--- 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">
--- 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"
--- 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"
--- 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"
--- 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"
--- 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}
--- 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}
--- 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}
--- 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>
--- 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"
--- 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"
--- 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
--- 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"
--- 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"
--- 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.{' '}
--- 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}
--- 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"
          >
--- 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));`}
--- 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}
--- 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">
--- 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}>
--- 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"
    >
--- 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>
--- 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>