From 6320d1884629f4f123bd9142d87d79570203b4ec Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 3 Jan 2024 11:20:19 +1100
Subject: [PATCH] fix(ui): upscale dropdown activates when clicking image
 actions

Weird issue with `react-select`... Made the popover lazy as a workaround.

Also updated styling of the popover.
---
 .../parameters/components/Upscale/ParamRealESRGANModel.tsx    | 2 +-
 .../parameters/components/Upscale/ParamUpscaleSettings.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
index 58d0a825d6..b82a28718c 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx
@@ -76,7 +76,7 @@ const ParamESRGANModel = () => {
   );
 
   return (
-    <InvControl label={t('models.esrganModel')}>
+    <InvControl label={t('models.esrganModel')} orientation="vertical">
       <InvSelect value={value} onChange={onChange} options={options} />
     </InvControl>
   );
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
index 149c226dea..0e91ffedce 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
@@ -37,7 +37,7 @@ const ParamUpscalePopover = (props: Props) => {
   }, [dispatch, imageDTO, isAllowedToUpscale, onClose]);
 
   return (
-    <InvPopover isOpen={isOpen} onClose={onClose}>
+    <InvPopover isOpen={isOpen} onClose={onClose} isLazy>
       <InvPopoverTrigger>
         <InvIconButton
           tooltip={t('parameters.upscale')}
@@ -47,7 +47,7 @@ const ParamUpscalePopover = (props: Props) => {
         />
       </InvPopoverTrigger>
       <InvPopoverContent>
-        <InvPopoverBody>
+        <InvPopoverBody minW={96}>
           <Flex flexDirection="column" gap={4}>
             <ParamESRGANModel />
             <InvButton