From 29d6f48901a483a3b574b05a4e17299e84581d5f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 14 Aug 2024 12:01:49 +1000
Subject: [PATCH] fix(ui): prompt shows thru prompt label text

---
 .../parameters/components/Core/ParamNegativePrompt.tsx   | 9 +++++----
 .../parameters/components/Core/ParamPositivePrompt.tsx   | 7 ++++---
 .../parameters/components/Prompts/PromptLabel.tsx        | 6 +++---
 .../SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx         | 7 ++++---
 .../SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx         | 7 ++++---
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
index 9ce6d16a97..0f32bdb435 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
@@ -53,10 +53,11 @@ export const ParamNegativePrompt = memo(() => {
           onKeyDown={onKeyDown}
           fontSize="sm"
           variant="darkFilled"
-          minH={24}
-          paddingRight={10}
-          paddingLeft={3}
-          paddingTop={7}
+          minH={28}
+          borderTopWidth={24} // This prevents the prompt from being hidden behind the header
+          paddingInlineEnd={10}
+          paddingInlineStart={3}
+          paddingTop={0}
           paddingBottom={3}
         />
         <PromptOverlayButtonWrapper>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
index 4c10b97dd3..ae79064bcf 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
@@ -68,9 +68,10 @@ export const ParamPositivePrompt = memo(() => {
           minH={40}
           onKeyDown={onKeyDown}
           variant="darkFilled"
-          paddingRight={10}
-          paddingLeft={3}
-          paddingTop={7}
+          borderTopWidth={24} // This prevents the prompt from being hidden behind the header
+          paddingInlineEnd={10}
+          paddingInlineStart={3}
+          paddingTop={0}
           paddingBottom={3}
         />
         <PromptOverlayButtonWrapper>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptLabel.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptLabel.tsx
index 1e9dfe0088..d5643cdda6 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptLabel.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Prompts/PromptLabel.tsx
@@ -1,9 +1,9 @@
-import { FormLabel } from '@invoke-ai/ui-library';
+import { Text } from '@invoke-ai/ui-library';
 
 export const PromptLabel = ({ label }: { label: string }) => {
   return (
-    <FormLabel color="base.450" fontSize="xs" pos="absolute" top={2} left={3}>
+    <Text variant="subtext" fontWeight="semibold" pos="absolute" top={1} left={2}>
       {label}
-    </FormLabel>
+    </Text>
   );
 };
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
index c0ce163dae..3167cbb624 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
@@ -42,9 +42,10 @@ export const ParamSDXLNegativeStylePrompt = memo(() => {
           fontSize="sm"
           variant="darkFilled"
           minH={24}
-          paddingRight={10}
-          paddingLeft={3}
-          paddingTop={7}
+          borderTopWidth={24} // This prevents the prompt from being hidden behind the header
+          paddingInlineEnd={10}
+          paddingInlineStart={3}
+          paddingTop={0}
           paddingBottom={3}
         />
         <PromptOverlayButtonWrapper>
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
index d452396183..272323797a 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
@@ -39,9 +39,10 @@ export const ParamSDXLPositiveStylePrompt = memo(() => {
           fontSize="sm"
           variant="darkFilled"
           minH={24}
-          paddingRight={10}
-          paddingLeft={3}
-          paddingTop={7}
+          borderTopWidth={24} // This prevents the prompt from being hidden behind the header
+          paddingInlineEnd={10}
+          paddingInlineStart={3}
+          paddingTop={0}
           paddingBottom={3}
         />
         <PromptOverlayButtonWrapper>