improvement(workflow): give a container one source for its own gutter

The four paddings and the header height existed twice: as
`CONTAINER_DIMENSIONS`, which sizes a container and clamps its children, and
again as Tailwind literals in `subflow-node-view`, which draws the header and
the content box. Nothing kept them in step and they had already drifted — the
view rendering a 40px header against a constant claiming 50, so children were
clamped 10px below where the header actually ends.

The view now renders from the constants, and the constant follows the DOM at 40.

Match the bottom gutter to the right at 80. The two edges that carry chrome are
now the two that are wider: the container's output handle sits on the right, and
the resize grip in the bottom-right corner spans 40px in from both, so a child
at the 24px gutter width could sit underneath it. Left and top are only gutter
and stay at 24.

Author: waleedlatif1

packages/workflow-renderer/src/dimensions.ts

@@ -83,27 +83,33 @@ export const estimateNoteBlockHeight = (content: string) => {
 /**
  * A container's box, and the gutter it keeps around the blocks inside it.
  *
- * Each padding is the gap between a child's edge and the container's, and
- * nothing else. The header is counted once, by the child's own position, which
- * `clampPositionToContainer` floors at `HEADER_HEIGHT + TOP_PADDING` — so these
- * are the numbers you see, and three of them match because those three edges
- * are only gutter.
+ * The single source for both halves of that: the layout math that sizes a
+ * container and clamps its children, and the card's own DOM. `subflow-node-view`
+ * renders its header and content box straight from these, so the gap the
+ * geometry reserves is the gap the container actually paints. They used to be
+ * separate — the same four numbers as Tailwind literals in the view — and had
+ * already drifted, the view drawing a 40px header against a constant that
+ * claimed 50.
  *
- * `RIGHT_PADDING` is the deliberate exception. The container's own output
- * handle sits on that edge, so a child needs clearance there it does not need
- * anywhere else. That makes it chrome rather than gutter, which is why it is
- * not tied to the other three.
+ * Each padding is the gap between a child's edge and the container's, counted
+ * once: the header is accounted for by the child's own position, which
+ * `clampPositionToContainer` floors at `HEADER_HEIGHT + TOP_PADDING`.
+ *
+ * The two edges that carry chrome are wider than the two that are only gutter.
+ * The container's output handle sits on the right, and the resize grip in the
+ * bottom-right corner spans 40px in from both — a child at the gutter width
+ * would sit underneath it.
  */
 export const CONTAINER_DIMENSIONS = {
   DEFAULT_WIDTH: 500,
   DEFAULT_HEIGHT: 300,
   MIN_WIDTH: 400,
   MIN_HEIGHT: 200,
-  HEADER_HEIGHT: 50,
+  HEADER_HEIGHT: 40,
   LEFT_PADDING: 24,
   RIGHT_PADDING: 80,
   TOP_PADDING: 24,
-  BOTTOM_PADDING: 24,
+  BOTTOM_PADDING: 80,
 } as const
 
 /**

packages/workflow-renderer/src/subflow/subflow-node-view.tsx

@@ -8,7 +8,7 @@ import {
   useStoreApi as useReactFlowStoreApi,
   useUpdateNodeInternals,
 } from 'reactflow'
-import { BLOCK_DIMENSIONS, HANDLE_POSITIONS } from '../dimensions'
+import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS, HANDLE_POSITIONS } from '../dimensions'
 import { OverflowSpan } from '../lib/overflow-span'
 import type { DiffStatus } from '../types'
 import {
@@ -588,8 +588,8 @@ export function SubflowNodeView({
           aria-label={`Select ${blockName}`}
           onClick={onSelect}
           onKeyDown={(event) => handleKeyboardActivation(event, onSelect)}
-          className='workflow-drag-handle relative z-20 flex h-[40px] cursor-grab items-center justify-between px-2 [&:active]:cursor-grabbing'
-          style={{ pointerEvents: 'auto' }}
+          className='workflow-drag-handle relative z-20 flex cursor-grab items-center justify-between px-2 [&:active]:cursor-grabbing'
+          style={{ pointerEvents: 'auto', height: CONTAINER_DIMENSIONS.HEADER_HEIGHT }}
           data-subflow-header=''
         >
           <div
@@ -647,9 +647,16 @@ export function SubflowNodeView({
         )}
 
         <div
-          className='relative z-20 h-[calc(100%-40px)] pt-4 pr-[80px] pb-4 pl-4'
+          className='relative z-20'
           data-dragarea='true'
-          style={{ pointerEvents: 'none' }}
+          style={{
+            pointerEvents: 'none',
+            height: `calc(100% - ${CONTAINER_DIMENSIONS.HEADER_HEIGHT}px)`,
+            paddingTop: CONTAINER_DIMENSIONS.TOP_PADDING,
+            paddingRight: CONTAINER_DIMENSIONS.RIGHT_PADDING,
+            paddingBottom: CONTAINER_DIMENSIONS.BOTTOM_PADDING,
+            paddingLeft: CONTAINER_DIMENSIONS.LEFT_PADDING,
+          }}
         >
           <SubflowStartView
             parentId={id}