♻️ 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/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>