feat(ui): scollable areas support x-axis scrolling

 Closes #5490

Author: psychedelicious

invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx

@@ -1,24 +1,35 @@
 import type { ChakraProps } from '@invoke-ai/ui';
 import { Box, Flex } from '@invoke-ai/ui';
-import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties, PropsWithChildren } from 'react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
 type Props = PropsWithChildren & {
   maxHeight?: ChakraProps['maxHeight'];
+  overflowX?: 'hidden' | 'scroll';
+  overflowY?: 'hidden' | 'scroll';
 };
 
 const styles: CSSProperties = { height: '100%', width: '100%' };
 
-const ScrollableContent = ({ children, maxHeight }: Props) => {
+const ScrollableContent = ({
+  children,
+  maxHeight,
+  overflowX = 'hidden',
+  overflowY = 'scroll',
+}: Props) => {
+  const overlayscrollbarsOptions = useMemo(
+    () => getOverlayScrollbarsParams(overflowX, overflowY).options,
+    [overflowX, overflowY]
+  );
   return (
     <Flex w="full" h="full" maxHeight={maxHeight} position="relative">
       <Box position="absolute" top={0} left={0} right={0} bottom={0}>
         <OverlayScrollbarsComponent
           defer
           style={styles}
-          options={overlayScrollbarsParams.options}
+          options={overlayscrollbarsOptions}
         >
           {children}
         </OverlayScrollbarsComponent>

invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts

@@ -1,3 +1,4 @@
+import { cloneDeep, merge } from 'lodash-es';
 import { ClickScrollPlugin, OverlayScrollbars } from 'overlayscrollbars';
 import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react';
 
@@ -16,3 +17,12 @@ export const overlayScrollbarsParams: UseOverlayScrollbarsParams = {
     overflow: { x: 'hidden' },
   },
 };
+
+export const getOverlayScrollbarsParams = (
+  overflowX: 'hidden' | 'scroll' = 'hidden',
+  overflowY: 'hidden' | 'scroll' = 'scroll'
+) => {
+  const params = cloneDeep(overlayScrollbarsParams);
+  merge(params, { options: { overflow: { y: overflowY, x: overflowX } } });
+  return params;
+};

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

@@ -1,5 +1,7 @@
 import { Box, Flex, IconButton, Tooltip } from '@invoke-ai/ui';
-import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import {
+  getOverlayScrollbarsParams,
+} from 'common/components/OverlayScrollbars/constants';
 import { isString } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
@@ -15,6 +17,11 @@ type Props = {
   withCopy?: boolean;
 };
 
+const overlayscrollbarsOptions = getOverlayScrollbarsParams(
+  'scroll',
+  'scroll'
+).options;
+
 const DataViewer = (props: Props) => {
   const { label, data, fileName, withDownload = true, withCopy = true } = props;
   const dataString = useMemo(
@@ -60,7 +67,7 @@ const DataViewer = (props: Props) => {
         <OverlayScrollbarsComponent
           defer
           style={overlayScrollbarsStyles}
-          options={overlayScrollbarsParams.options}
+          options={overlayscrollbarsOptions}
         >
           <pre>{dataString}</pre>
         </OverlayScrollbarsComponent>

invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemDetail.tsx

@@ -6,7 +6,6 @@ import {
   Spinner,
   Text,
 } from '@invoke-ai/ui';
-import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
 import { useCancelBatch } from 'features/queue/hooks/useCancelBatch';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
@@ -127,9 +126,7 @@ const QueueItemComponent = ({ queueItemDTO }: Props) => {
         justifyContent="center"
       >
         {queueItem ? (
-          <ScrollableContent>
-            <DataViewer label="Queue Item" data={queueItem} />
-          </ScrollableContent>
+          <DataViewer label="Queue Item" data={queueItem} />
         ) : (
           <Spinner opacity={0.5} />
         )}