From b46dbcc76db1d7117d0e02e2af394a294c04492c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 5 Feb 2025 20:02:11 +1100
Subject: [PATCH] fix(ui): divider layout

---
 .../builder/DividerElementComponent.tsx       | 20 +++--------
 .../builder/FormElementEditModeWrapper.tsx    | 33 ++++++++++++++++---
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
index b30eeab4ae..bf6d60a894 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
@@ -11,11 +11,11 @@ import { memo } from 'react';
 const sx: SystemStyleObject = {
   bg: 'base.700',
   flexShrink: 0,
-  '&[data-orientation="horizontal"]': {
+  '&[data-layout="column"]': {
     width: '100%',
     height: '1px',
   },
-  '&[data-orientation="vertical"]': {
+  '&[data-layout="row"]': {
     height: '100%',
     width: '1px',
   },
@@ -43,14 +43,7 @@ export const DividerElementComponentViewMode = memo(({ el }: { el: DividerElemen
   const container = useContainerContext();
   const { id } = el;
 
-  return (
-    <Flex
-      id={id}
-      className={DIVIDER_CLASS_NAME}
-      sx={sx}
-      data-orientation={container?.layout === 'column' ? 'horizontal' : 'vertical'}
-    />
-  );
+  return <Flex id={id} className={DIVIDER_CLASS_NAME} sx={sx} data-layout={container?.layout} />;
 });
 
 DividerElementComponentViewMode.displayName = 'DividerElementComponentViewMode';
@@ -61,12 +54,7 @@ export const DividerElementComponentEditMode = memo(({ el }: { el: DividerElemen
 
   return (
     <FormElementEditModeWrapper element={el}>
-      <Flex
-        id={id}
-        className={DIVIDER_CLASS_NAME}
-        sx={sx}
-        data-orientation={container?.layout === 'column' ? 'horizontal' : 'vertical'}
-      />
+      <Flex id={id} className={DIVIDER_CLASS_NAME} sx={sx} data-layout={container?.layout} />
     </FormElementEditModeWrapper>
   );
 });
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
index 943a9311cf..33efa54e07 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
@@ -1,5 +1,6 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
+import { useContainerContext } from 'features/nodes/components/sidePanel/builder/contexts';
 import { DndListDropIndicator } from 'features/nodes/components/sidePanel/builder/DndListDropIndicator';
 import { FormElementEditModeHeader } from 'features/nodes/components/sidePanel/builder/FormElementEditModeHeader';
 import { EDIT_MODE_WRAPPER_CLASS_NAME, getEditModeWrapperId } from 'features/nodes/components/sidePanel/builder/shared';
@@ -8,7 +9,15 @@ import type { FormElement } from 'features/nodes/types/workflow';
 import type { PropsWithChildren } from 'react';
 import { memo, useRef } from 'react';
 
-const sx: SystemStyleObject = {
+const wrapperSx: SystemStyleObject = {
+  position: 'relative',
+  flex: '1 1 0',
+  '&[data-element-type="divider"]&[data-layout="row"]': {
+    flex: '0 1 0',
+  },
+};
+
+const innerSx: SystemStyleObject = {
   position: 'relative',
   flexDir: 'column',
   boxShadow: '0 0 0 1px var(--invoke-colors-base-750)',
@@ -24,24 +33,38 @@ const sx: SystemStyleObject = {
     opacity: 1,
     bg: 'base.700',
   },
+  '&[data-element-type="divider"]&[data-layout="row"]': {
+    w: 'min-content',
+  },
+  '&[data-element-type="divider"]&[data-layout="column"]': {
+    h: 'min-content',
+  },
 };
 
 export const FormElementEditModeWrapper = memo(({ element, children }: PropsWithChildren<{ element: FormElement }>) => {
   const draggableRef = useRef<HTMLDivElement>(null);
   const dragHandleRef = useRef<HTMLDivElement>(null);
   const [activeDropRegion, isDragging] = useDraggableFormElement(element.id, draggableRef, dragHandleRef);
+  const containerCtx = useContainerContext();
 
   return (
     <Flex
       id={getEditModeWrapperId(element.id)}
       ref={draggableRef}
       className={EDIT_MODE_WRAPPER_CLASS_NAME}
-      position="relative"
-      flex={1}
+      sx={wrapperSx}
+      data-element-type={element.type}
+      data-layout={containerCtx?.layout}
     >
-      <Flex sx={sx} data-is-dragging={isDragging} data-active-drop-region={activeDropRegion}>
+      <Flex
+        sx={innerSx}
+        data-is-dragging={isDragging}
+        data-active-drop-region={activeDropRegion}
+        data-element-type={element.type}
+        data-layout={containerCtx?.layout}
+      >
         <FormElementEditModeHeader ref={dragHandleRef} element={element} />
-        <Flex w="full" p={4} alignItems="center" gap={4}>
+        <Flex w="full" h="full" p={4} alignItems="center" gap={4}>
           {children}
         </Flex>
       </Flex>