fix: Concat Link Styling (#4048)

## What type of PR is this? (check all applicable)

- [x] Bug Fix

## Description

- Fix SDXL Concat Link animation not considering the fact that prompt
boxes can be resized.
- Also fixed a minor issue where the overlaying animation box would
block the prompt input resize slightly. Should be good now.

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx

@@ -13,15 +13,20 @@ import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 import AddEmbeddingButton from 'features/embedding/components/AddEmbeddingButton';
 import ParamEmbeddingPopover from 'features/embedding/components/ParamEmbeddingPopover';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { AnimatePresence } from 'framer-motion';
 import { isEqual } from 'lodash-es';
 import { flushSync } from 'react-dom';
 import { setNegativeStylePromptSDXL } from '../store/sdxlSlice';
+import SDXLConcatLink from './SDXLConcatLink';
 
 const promptInputSelector = createSelector(
   [stateSelector, activeTabNameSelector],
   ({ sdxl }, activeTabName) => {
+    const { negativeStylePrompt, shouldConcatSDXLStylePrompt } = sdxl;
+
     return {
-      prompt: sdxl.negativeStylePrompt,
+      prompt: negativeStylePrompt,
+      shouldConcatSDXLStylePrompt,
       activeTabName,
     };
   },
@@ -37,11 +42,13 @@ const promptInputSelector = createSelector(
  */
 const ParamSDXLNegativeStyleConditioning = () => {
   const dispatch = useAppDispatch();
-  const { prompt, activeTabName } = useAppSelector(promptInputSelector);
   const isReady = useIsReadyToInvoke();
   const promptRef = useRef<HTMLTextAreaElement>(null);
   const { isOpen, onClose, onOpen } = useDisclosure();
 
+  const { prompt, activeTabName, shouldConcatSDXLStylePrompt } =
+    useAppSelector(promptInputSelector);
+
   const handleChangePrompt = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       dispatch(setNegativeStylePromptSDXL(e.target.value));
@@ -111,6 +118,20 @@ const ParamSDXLNegativeStyleConditioning = () => {
 
   return (
     <Box position="relative">
+      <AnimatePresence>
+        {shouldConcatSDXLStylePrompt && (
+          <Box
+            sx={{
+              position: 'absolute',
+              left: '3',
+              w: '94%',
+              top: '-17px',
+            }}
+          >
+            <SDXLConcatLink />
+          </Box>
+        )}
+      </AnimatePresence>
       <FormControl>
         <ParamEmbeddingPopover
           isOpen={isOpen}

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPositiveStyleConditioning.tsx

@@ -13,15 +13,20 @@ import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 import AddEmbeddingButton from 'features/embedding/components/AddEmbeddingButton';
 import ParamEmbeddingPopover from 'features/embedding/components/ParamEmbeddingPopover';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { AnimatePresence } from 'framer-motion';
 import { isEqual } from 'lodash-es';
 import { flushSync } from 'react-dom';
 import { setPositiveStylePromptSDXL } from '../store/sdxlSlice';
+import SDXLConcatLink from './SDXLConcatLink';
 
 const promptInputSelector = createSelector(
   [stateSelector, activeTabNameSelector],
   ({ sdxl }, activeTabName) => {
+    const { positiveStylePrompt, shouldConcatSDXLStylePrompt } = sdxl;
+
     return {
-      prompt: sdxl.positiveStylePrompt,
+      prompt: positiveStylePrompt,
+      shouldConcatSDXLStylePrompt,
       activeTabName,
     };
   },
@@ -37,11 +42,13 @@ const promptInputSelector = createSelector(
  */
 const ParamSDXLPositiveStyleConditioning = () => {
   const dispatch = useAppDispatch();
-  const { prompt, activeTabName } = useAppSelector(promptInputSelector);
   const isReady = useIsReadyToInvoke();
   const promptRef = useRef<HTMLTextAreaElement>(null);
   const { isOpen, onClose, onOpen } = useDisclosure();
 
+  const { prompt, activeTabName, shouldConcatSDXLStylePrompt } =
+    useAppSelector(promptInputSelector);
+
   const handleChangePrompt = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       dispatch(setPositiveStylePromptSDXL(e.target.value));
@@ -111,6 +118,20 @@ const ParamSDXLPositiveStyleConditioning = () => {
 
   return (
     <Box position="relative">
+      <AnimatePresence>
+        {shouldConcatSDXLStylePrompt && (
+          <Box
+            sx={{
+              position: 'absolute',
+              left: '3',
+              w: '94%',
+              top: '-17px',
+            }}
+          >
+            <SDXLConcatLink />
+          </Box>
+        )}
+      </AnimatePresence>
       <FormControl>
         <ParamEmbeddingPopover
           isOpen={isOpen}

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx

@@ -1,23 +1,11 @@
-import { Box, Flex } from '@chakra-ui/react';
-import { RootState } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
+import { Flex } from '@chakra-ui/react';
 import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
 import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
-import { AnimatePresence } from 'framer-motion';
 import ParamSDXLConcatButton from './ParamSDXLConcatButton';
 import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
 import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
-import SDXLConcatLink from './SDXLConcatLink';
 
 export default function ParamSDXLPromptArea() {
-  const shouldPinParametersPanel = useAppSelector(
-    (state: RootState) => state.ui.shouldPinParametersPanel
-  );
-
-  const shouldConcatSDXLStylePrompt = useAppSelector(
-    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
-  );
-
   return (
     <Flex
       sx={{
@@ -25,32 +13,6 @@ export default function ParamSDXLPromptArea() {
         gap: 2,
       }}
     >
-      <AnimatePresence>
-        {shouldConcatSDXLStylePrompt && (
-          <Box
-            sx={{
-              position: 'absolute',
-              w: 'full',
-              top: shouldPinParametersPanel ? '119px' : '175px',
-            }}
-          >
-            <SDXLConcatLink />
-          </Box>
-        )}
-      </AnimatePresence>
-      <AnimatePresence>
-        {shouldConcatSDXLStylePrompt && (
-          <Box
-            sx={{
-              position: 'absolute',
-              w: 'full',
-              top: shouldPinParametersPanel ? '263px' : '319px',
-            }}
-          >
-            <SDXLConcatLink />
-          </Box>
-        )}
-      </AnimatePresence>
       <ParamPositiveConditioning />
       <ParamSDXLConcatButton />
       <ParamSDXLPositiveStyleConditioning />

invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx

@@ -18,14 +18,7 @@ const sharedConcatLinkStyle: CSSObject = {
 
 export default function SDXLConcatLink() {
   return (
-    <Flex
-      sx={{
-        h: 0.5,
-        placeContent: 'center',
-        gap: 2,
-        flexDirection: 'column',
-      }}
-    >
+    <Flex>
       <Box
         as={motion.div}
         initial={{
@@ -43,7 +36,6 @@ export default function SDXLConcatLink() {
           top: '1px',
           borderTop: 'none',
           borderColor: 'base.400',
-          zIndex: 2,
           ...sharedConcatLinkStyle,
           _dark: {
             borderColor: 'accent.500',