feat(ui): increase spacing in form builder view mode

invoke-ai · Feb 28, 2025 · ded8a84 · ded8a84
1 parent 94771ea
commit ded8a84
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElement.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElement.tsx
@@ -50,7 +50,7 @@ const ContainerElement = memo(({ id }: { id: string }) => {
 ContainerElement.displayName = 'ContainerElementComponent';
 
 const containerViewModeSx: SystemStyleObject = {
-  gap: 4,
+  gap: 2,
   '&[data-self-layout="column"]': {
     flexDir: 'column',
     alignItems: 'stretch',
@@ -197,7 +197,7 @@ const rootViewModeSx: SystemStyleObject = {
   borderRadius: 'base',
   w: 'full',
   h: 'full',
-  gap: 4,
+  gap: 2,
   display: 'flex',
   flex: 1,
   maxW: '768px',
@@ -232,6 +232,7 @@ RootContainerElementViewMode.displayName = 'RootContainerElementViewMode';
 
 const rootEditModeSx: SystemStyleObject = {
   ...rootViewModeSx,
+  gap: 4,
   '&[data-is-dragging-over="true"]': {
     opacity: 1,
     bg: 'base.850',

diff --git a/...frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementViewMode.tsx b/...frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementViewMode.tsx
@@ -20,6 +20,9 @@ const sx: SystemStyleObject = {
     flex: '1 1 0',
     minW: 32,
   },
+  '&[data-with-description="false"]': {
+    pb: 2,
+  },
 };
 
 export const NodeFieldElementViewMode = memo(({ el }: { el: NodeFieldElement }) => {
@@ -35,7 +38,13 @@ export const NodeFieldElementViewMode = memo(({ el }: { el: NodeFieldElement })
   );
 
   return (
-    <Flex id={id} className={NODE_FIELD_CLASS_NAME} sx={sx} data-parent-layout={containerCtx.layout}>
+    <Flex
+      id={id}
+      className={NODE_FIELD_CLASS_NAME}
+      sx={sx}
+      data-parent-layout={containerCtx.layout}
+      data-with-description={showDescription && !!_description}
+    >
       <FormControl flex="1 1 0" orientation="vertical">
         <NodeFieldElementLabel el={el} />
         <Flex w="full" gap={4}>