From 0e9470503fe117621a35aed934037564639d840f Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Sat, 13 May 2023 08:18:16 +1200
Subject: [PATCH] fix: Rework the layout of the parameters scrollbar

---
 .../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, 12 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
index 407187294c..cfb2ad267c 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
@@ -43,13 +43,18 @@ const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
             h: 'full',
             w: 'full',
             position: 'absolute',
+            paddingRight: 4,
           }}
         >
           {props.children}
         </Flex>
       </OverlayScrollable>
       <PinParametersPanelButton
-        sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
+        sx={{
+          position: 'absolute',
+          top: 0,
+          insetInlineEnd: 4,
+        }}
       />
     </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 71413fd01a..a993f02ce6 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: 'auto',
-          autoHide: 'move',
-          autoHideDelay: 1300,
+          visibility: 'visible',
+          autoHide: 'never',
+          autoHideDelay: 500,
           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 cbd261f455..46d416204d 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: 4, w: 'full', h: 'full' }}>
+    <Flex sx={{ gap: 2, 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 87e77cc3ba..6c140172be 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: 4, w: 'full', h: 'full' }}>
+    <Flex sx={{ gap: 2, 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 2d591d1ecc..aa8c1c6a76 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: 4, w: 'full', h: 'full' }}>
+    <Flex sx={{ gap: 2, w: 'full', h: 'full' }}>
       <ParametersPinnedWrapper>
         <UnifiedCanvasParameters />
       </ParametersPinnedWrapper>