feat: Introduce Mantine's ScrollArea

invokeai/frontend/web/src/common/components/IAIScrollArea.tsx

@@ -0,0 +1,12 @@
+import { ScrollArea, ScrollAreaProps } from '@mantine/core';
+
+type IAIScrollArea = ScrollAreaProps;
+
+export default function IAIScrollArea(props: IAIScrollArea) {
+  const { offsetScrollbars = true, ...rest } = props;
+  return (
+    <ScrollArea offsetScrollbars={offsetScrollbars} {...rest}>
+      {props.children}
+    </ScrollArea>
+  );
+}

invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx

@@ -9,15 +9,15 @@ import {
   Tooltip,
 } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
+import IAIScrollArea from 'common/components/IAIScrollArea';
+import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
 import { setShouldShowImageDetails } from 'features/ui/store/uiSlice';
 import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaCopy } from 'react-icons/fa';
 import { IoArrowUndoCircleOutline } from 'react-icons/io5';
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { ImageDTO } from 'services/api';
-import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
 
 type MetadataItemProps = {
   isLink?: boolean;
@@ -317,19 +317,19 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
           </Tooltip>
           <Text fontWeight="semibold">Metadata JSON:</Text>
         </Flex>
-        <OverlayScrollbarsComponent defer>
+        <IAIScrollArea>
           <Box
             sx={{
               padding: 4,
               borderRadius: 'base',
               bg: 'whiteAlpha.500',
               _dark: { bg: 'blackAlpha.500' },
-              w: 'max-content',
+              w: 'full',
             }}
           >
             <pre>{metadataJSON}</pre>
           </Box>
-        </OverlayScrollbarsComponent>
+        </IAIScrollArea>
       </Flex>
     </Flex>
   );

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsSchedulers.tsx

@@ -1,5 +1,4 @@
 import {
-  Box,
   Menu,
   MenuButton,
   MenuItemOption,
@@ -13,7 +12,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import { setSchedulers } from 'features/ui/store/uiSlice';
 import { isArray } from 'lodash-es';
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { useTranslation } from 'react-i18next';
 
 export default function SettingsSchedulers() {

invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx

@@ -1,21 +1,21 @@
+import { Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { memo, useMemo } from 'react';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { Box, Flex } from '@chakra-ui/react';
+import IAIScrollArea from 'common/components/IAIScrollArea';
+import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
-import OverlayScrollable from './common/OverlayScrollable';
-import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
 import {
   activeTabNameSelector,
   uiSelector,
 } from 'features/ui/store/uiSelectors';
 import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice';
-import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer';
+import { memo, useMemo } from 'react';
+import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
 import PinParametersPanelButton from './PinParametersPanelButton';
-import TextToImageTabParameters from './tabs/TextToImage/TextToImageTabParameters';
+import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer';
 import ImageToImageTabParameters from './tabs/ImageToImage/ImageToImageTabParameters';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import TextToImageTabParameters from './tabs/TextToImage/TextToImageTabParameters';
 import UnifiedCanvasParameters from './tabs/UnifiedCanvas/UnifiedCanvasParameters';
 
 const selector = createSelector(
@@ -82,9 +82,9 @@ const ParametersDrawer = () => {
           <InvokeAILogoComponent />
           <PinParametersPanelButton />
         </Flex>
-        <OverlayScrollable>
+        <IAIScrollArea>
           <Flex sx={{ flexDir: 'column', gap: 2 }}>{drawerContent}</Flex>
-        </OverlayScrollable>
+        </IAIScrollArea>
       </Flex>
     </ResizableDrawer>
   );

invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx

@@ -1,11 +1,11 @@
 import { Box, Flex } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import IAIScrollArea from 'common/components/IAIScrollArea';
 import { PropsWithChildren, memo } from 'react';
 import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
-import OverlayScrollable from './common/OverlayScrollable';
-import PinParametersPanelButton from './PinParametersPanelButton';
-import { createSelector } from '@reduxjs/toolkit';
 import { uiSelector } from '../store/uiSelectors';
-import { useAppSelector } from 'app/store/storeHooks';
+import PinParametersPanelButton from './PinParametersPanelButton';
 
 const selector = createSelector(uiSelector, (ui) => {
   const { shouldPinParametersPanel, shouldShowParametersPanel } = ui;
@@ -35,21 +35,20 @@ const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
         flexShrink: 0,
       }}
     >
-      <OverlayScrollable>
+      <Flex
-        <Flex
+        sx={{
-          sx={{
+          h: 'full',
-            gap: 2,
+          w: 'full',
-            flexDirection: 'column',
+          position: 'absolute',
-            h: 'full',
+        }}
-            w: 'full',
+      >
-            position: 'absolute',
+        <IAIScrollArea>
-          }}
+          <Flex sx={{ flexDirection: 'column', gap: 2 }}>{props.children}</Flex>
-        >
+        </IAIScrollArea>
-          {props.children}
+      </Flex>
-        </Flex>
+
-      </OverlayScrollable>
       <PinParametersPanelButton
-        sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
+        sx={{ position: 'absolute', top: 0, insetInlineEnd: 2 }}
       />
     </Box>
   );

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx

@@ -1,14 +1,17 @@
 import { Box, Flex } from '@chakra-ui/react';
-import { memo, useCallback, useRef } from 'react';
-import { Panel, PanelGroup } from 'react-resizable-panels';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
-import ResizeHandle from '../ResizeHandle';
-import ImageToImageTabParameters from './ImageToImageTabParameters';
-import TextToImageTabMain from '../TextToImage/TextToImageTabMain';
-import { ImperativePanelGroupHandle } from 'react-resizable-panels';
-import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
 import InitialImageDisplay from 'features/parameters/components/Parameters/ImageToImage/InitialImageDisplay';
+import { memo, useCallback, useRef } from 'react';
+import {
+  ImperativePanelGroupHandle,
+  Panel,
+  PanelGroup,
+} from 'react-resizable-panels';
+import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
+import ResizeHandle from '../ResizeHandle';
+import TextToImageTabMain from '../TextToImage/TextToImageTabMain';
+import ImageToImageTabParameters from './ImageToImageTabParameters';
 
 const ImageToImageTab = () => {
   const dispatch = useAppDispatch();
@@ -23,7 +26,7 @@ const ImageToImageTab = () => {
   }, []);
 
   return (
-    <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
+    <Flex sx={{ gap: 2, w: 'full', h: 'full' }}>
       <ParametersPinnedWrapper>
         <ImageToImageTabParameters />
       </ParametersPinnedWrapper>

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx

@@ -1,12 +1,12 @@
 import { Flex } from '@chakra-ui/react';
 import { memo } from 'react';
+import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
 import TextToImageTabMain from './TextToImageTabMain';
 import TextToImageTabParameters from './TextToImageTabParameters';
-import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
 
 const TextToImageTab = () => {
   return (
-    <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
+    <Flex sx={{ gap: 2, w: 'full', h: 'full' }}>
       <ParametersPinnedWrapper>
         <TextToImageTabParameters />
       </ParametersPinnedWrapper>

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx

@@ -1,12 +1,12 @@
 import { Flex } from '@chakra-ui/react';
 import { memo } from 'react';
+import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
 import UnifiedCanvasContent from './UnifiedCanvasContent';
 import UnifiedCanvasParameters from './UnifiedCanvasParameters';
-import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
 
 const UnifiedCanvasTab = () => {
   return (
-    <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
+    <Flex sx={{ gap: 2, w: 'full', h: 'full' }}>
       <ParametersPinnedWrapper>
         <UnifiedCanvasParameters />
       </ParametersPinnedWrapper>