From ddeafc6833e260deb67933a005c653a03526403b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 14 Aug 2024 12:24:57 +1000
Subject: [PATCH] fix(ui): minimize layout shift when overlaying preset prompt
 preview

---
 .../parameters/components/Prompts/ViewModePrompt.tsx  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx
index a8cdd67842..d2801dd34c 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx
@@ -35,14 +35,17 @@ export const ViewModePrompt = ({
         onClick={handleExitViewMode}
         justifyContent="space-between"
         h="full"
-        paddingRight={3}
-        paddingLeft={3}
-        paddingTop={7}
+        borderWidth={1}
+        borderTopWidth={24} // This prevents the prompt from being hidden behind the header
+        borderColor="transparent"
+        paddingInlineEnd={10}
+        paddingInlineStart={3}
+        paddingTop={0}
         paddingBottom={3}
       >
         <PromptLabel label={label} />
         <Flex overflow="scroll">
-          <Text w="full">
+          <Text w="full" lineHeight="short">
             {presetChunks.map((chunk, index) => (
               <Text
                 as="span"