From caecfadf110f4ebd4db54e48177d941f68d64b99 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 12 Mar 2023 13:04:22 +1100
Subject: [PATCH] fix(ui): fix shadow

---
 .../components/common/ResizableDrawer/ResizableDrawer.tsx   | 4 ++--
 .../web/src/features/ui/components/common/Scrollable.tsx    | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx b/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
index 658dce7544..ec1c003b4a 100644
--- a/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
@@ -74,7 +74,7 @@ const ResizableDrawer = ({
     () =>
       initialWidth ??
       minWidth ??
-      (['left', 'right'].includes(direction) ? 500 : '100vw'),
+      (['left', 'right'].includes(direction) ? 500 : '100%'),
     [initialWidth, minWidth, direction]
   );
 
@@ -82,7 +82,7 @@ const ResizableDrawer = ({
     () =>
       initialHeight ??
       minHeight ??
-      (['top', 'bottom'].includes(direction) ? 500 : '100vh'),
+      (['top', 'bottom'].includes(direction) ? 500 : '100%'),
     [initialHeight, minHeight, direction]
   );
 
diff --git a/invokeai/frontend/web/src/features/ui/components/common/Scrollable.tsx b/invokeai/frontend/web/src/features/ui/components/common/Scrollable.tsx
index 50901fdf86..39c40d284e 100644
--- a/invokeai/frontend/web/src/features/ui/components/common/Scrollable.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/common/Scrollable.tsx
@@ -68,7 +68,8 @@ const Scrollable = ({ children }: ScrollableProps) => {
         sx={{
           ...scrollShadowBaseStyles,
           bottom: 0,
-          boxShadow: 'inset 0 -5rem 2rem -2rem var(--invokeai-colors-base-900)',
+          boxShadow:
+            'inset 0 -3.5rem 2rem -2rem var(--invokeai-colors-base-900)',
         }}
       ></Box>
       <Box
@@ -76,7 +77,8 @@ const Scrollable = ({ children }: ScrollableProps) => {
         sx={{
           ...scrollShadowBaseStyles,
           top: 0,
-          boxShadow: 'inset 0 5rem 2rem -2rem var(--invokeai-colors-base-900)',
+          boxShadow:
+            'inset 0 3.5 rem 2rem -2rem var(--invokeai-colors-base-900)',
         }}
       ></Box>
     </Box>