fix(embedded): autolayout viewport calculation for resource view

[waleedlatif1]

Summary

• Thread embedded flag through viewport calculation so embedded workflows use container rect directly
• Skip CSS variable offsets (sidebar, panel, terminal) that don't apply in the embedded context
• Blocks no longer get cut off when autolayout runs in the resource view (MothershipView)

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[cursor]

You have used all Bugbot PR reviews included in your free trial for your GitHub account on this workspace.

To continue using Bugbot reviews, enable Bugbot for your team in the Cursor dashboard.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Mar 17, 2026 4:30pm

[greptile-apps]

Greptile Summary

This PR fixes autolayout viewport calculation in the embedded (resource/MothershipView) context by threading an embedded flag through useCanvasViewport and useAutoLayout, so that when running inside an embedded frame the layout engine uses the ReactFlow container's own getBoundingClientRect() dimensions rather than reading sidebar/panel/terminal CSS variable offsets that don't exist in that context.

Key changes:

• use-canvas-viewport.ts — exports a new CanvasViewportOptions interface; getVisibleCanvasBounds now short-circuits to container rect when embedded: true; useMemo stabilises the options object reference to prevent unnecessary callback re-creation; getVisibleCanvasBounds is no longer exposed on the hook's return value (no external callers were using it)
• use-auto-layout.ts — accepts and forwards CanvasViewportOptions to useCanvasViewport
• workflow.tsx — passes { embedded } to both useCanvasViewport and useAutoLayout

The logic is sound: zero offsets are returned in embedded mode, which correctly centres the content within the full container rect.

Confidence Score: 4/5

• Safe to merge — targeted bug fix with no regressions to non-embedded paths and no breaking changes to hook consumers.
• The fix is narrowly scoped, the non-embedded code path is untouched, and the only callers of useCanvasViewport (workflow.tsx, use-auto-layout.ts, workflow-controls.tsx) all compile cleanly. The one point deducted is for the absence of automated tests and the minor double DOM query inefficiency in embedded mode.
• apps/sim/hooks/use-canvas-viewport.ts — minor double DOM query in getVisibleCanvasCenter when embedded

Important Files Changed

Filename	Overview
apps/sim/hooks/use-canvas-viewport.ts	Core change: adds CanvasViewportOptions with embedded flag, short-circuits CSS variable offsets when embedded, and memoizes options to prevent unnecessary re-renders. getVisibleCanvasBounds is removed from the hook's public return value (safe — no external callers). Minor: when embedded, the .react-flow DOM node is queried twice (once in getVisibleCanvasBounds, again in getVisibleCanvasCenter).
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-auto-layout.ts	Minimal, clean change: threads CanvasViewportOptions from callers through to useCanvasViewport so embedded auto-layout uses the correct viewport bounds.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	Passes { embedded } to both useCanvasViewport and useAutoLayout, correctly propagating the embedded context so viewport calculations skip the sidebar/panel/terminal CSS offsets.

Sequence Diagram

sequenceDiagram
    participant WC as WorkflowContent
    participant UAL as useAutoLayout
    participant UCV as useCanvasViewport
    participant GVB as getVisibleCanvasBounds
    participant DOM as DOM

    WC->>UAL: useAutoLayout(workflowId, { embedded })
    UAL->>UCV: useCanvasViewport(reactFlowInstance, { embedded })
    UCV->>UCV: stableOptions = useMemo(() => embedded ? { embedded } : undefined, [embedded])

    Note over WC: User triggers auto-layout

    WC->>UAL: handleAutoLayout()
    UAL->>UAL: applyAutoLayoutAndUpdateStore()
    UAL->>UCV: fitViewToBounds({ padding, duration })
    UCV->>GVB: getVisibleCanvasBounds(stableOptions)

    alt embedded === true
        GVB->>DOM: querySelector('.react-flow')
        DOM-->>GVB: flowContainer
        GVB->>DOM: getBoundingClientRect()
        DOM-->>GVB: { width, height, left, top }
        GVB-->>UCV: { width, height, offsetLeft: 0, offsetRight: 0, offsetBottom: 0 }
    else not embedded
        GVB->>DOM: getComputedStyle (CSS vars)
        DOM-->>GVB: --sidebar-width, --terminal-height, --panel-width
        GVB-->>UCV: adjusted bounds with CSS offsets
    end

    UCV->>UCV: calculate zoom & viewport position
    UCV->>DOM: reactFlowInstance.setViewport({ x, y, zoom })

Loading

Comments Outside Diff (1)

1. apps/sim/hooks/use-canvas-viewport.ts, line 75-87 (link)

   Double DOM query for .react-flow when embedded

   getVisibleCanvasCenter queries document.querySelector('.react-flow') on line 78, but getVisibleCanvasBounds (called on line 76) already queries it on line 22. In the embedded path this means the same DOM lookup is performed twice per call. Since getVisibleCanvasBounds already has the rect available in the embedded branch, you could return containerLeft/containerTop alongside the bounds, or lift the query above both calls. This is a minor inefficiency, but worth noting since both helpers are always called together.

   function getVisibleCanvasCenter(options?: CanvasViewportOptions): { x: number; y: number } {
     const flowContainer = document.querySelector('.react-flow')
     const rect = flowContainer?.getBoundingClientRect()
     const containerLeft = rect?.left ?? 0
     const containerTop = rect?.top ?? 0
   
     const bounds = getVisibleCanvasBounds(options, flowContainer ?? undefined)
     // ...
   }

_{Last reviewed commit: 201228c}

[cursor]

You have used all Bugbot PR reviews included in your free trial for your GitHub account on this workspace.

To continue using Bugbot reviews, enable Bugbot for your team in the Cursor dashboard.