From d3a7fea9396f5cee15374e54ecdcab84fd4108ad Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 13 May 2023 23:59:30 +1000
Subject: [PATCH] Revert "fix: Rework the layout of the parameters scrollbar"

This reverts commit 6f1fc397f75fe0fdb3a50639cfad52bf98604146.
---
 .../src/features/ui/components/ParametersPinnedWrapper.tsx | 7 +------
 .../features/ui/components/common/OverlayScrollable.tsx    | 6 +++---
 .../ui/components/tabs/ImageToImage/ImageToImageTab.tsx    | 2 +-
 .../ui/components/tabs/TextToImage/TextToImageTab.tsx      | 2 +-
 .../ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx  | 2 +-
 5 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
index cfb2ad267c..407187294c 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
@@ -43,18 +43,13 @@ const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
             h: 'full',
             w: 'full',
             position: 'absolute',
-            paddingRight: 4,
           }}
         >
           {props.children}
         </Flex>
       </OverlayScrollable>
       <PinParametersPanelButton
-        sx={{
-          position: 'absolute',
-          top: 0,
-          insetInlineEnd: 4,
-        }}
+        sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
       />
     </Box>
   );
diff --git a/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx b/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx
index a993f02ce6..71413fd01a 100644
--- a/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx
@@ -8,9 +8,9 @@ const OverlayScrollable = (props: PropsWithChildren) => {
       style={{ height: '100%', width: '100%' }}
       options={{
         scrollbars: {
-          visibility: 'visible',
-          autoHide: 'never',
-          autoHideDelay: 500,
+          visibility: 'auto',
+          autoHide: 'move',
+          autoHideDelay: 1300,
           theme: 'os-theme-dark',
         },
         overflow: { x: 'hidden' },
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx
index 46d416204d..cbd261f455 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx
@@ -23,7 +23,7 @@ const ImageToImageTab = () => {
   }, []);
 
   return (
-    <Flex sx={{ gap: 2, w: 'full', h: 'full' }}>
+    <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
       <ParametersPinnedWrapper>
         <ImageToImageTabParameters />
       </ParametersPinnedWrapper>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx
index 6c140172be..87e77cc3ba 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx
@@ -6,7 +6,7 @@ import ParametersPinnedWrapper from '../../ParametersPinnedWrapper';
 
 const TextToImageTab = () => {
   return (
-    <Flex sx={{ gap: 2, w: 'full', h: 'full' }}>
+    <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
       <ParametersPinnedWrapper>
         <TextToImageTabParameters />
       </ParametersPinnedWrapper>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx
index aa8c1c6a76..2d591d1ecc 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx
@@ -20,7 +20,7 @@ const UnifiedCanvasTab = () => {
   const { shouldUseCanvasBetaLayout } = useAppSelector(selector);
 
   return (
-    <Flex sx={{ gap: 2, w: 'full', h: 'full' }}>
+    <Flex sx={{ gap: 4, w: 'full', h: 'full' }}>
       <ParametersPinnedWrapper>
         <UnifiedCanvasParameters />
       </ParametersPinnedWrapper>