fix(landing): stabilize previews across browsers

[waleedlatif1]

Summary

• replace scaled SVG foreign objects with a shared responsive HTML stage across landing previews
• keep workflow edges in SVG while rendering animated cards in stable HTML coordinates
• isolate preview layout work and avoid React rerenders during resize

Type of Change

• Bug fix

Testing

• Tested manually in Chromium and WebKit across all landing routes
• Verified animated sidebar and workflow geometry remain stable frame-to-frame
• Added focused scale calculation tests
• Ran lint, TypeScript, block-registry checks, and all repository audits

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)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Aug 26, 2026 10:53pm

[cubic-dev-ai]

No issues found across 11 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}

[greptile-apps]

Greptile Summary

The PR replaces SVG foreignObject-based landing previews with a shared responsive HTML design stage to stabilize cross-browser rendering.

• Adds an imperative ResizeObserver-driven scale calculation with focused unit tests.
• Keeps workflow edges in SVG while rendering cards and preview surfaces as HTML.
• Migrates shared landing preview shells to the responsive stage.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
apps/sim/app/(landing)/components/shared/responsive-design-stage/responsive-design-stage.tsx	Introduces the shared fixed-design responsive stage and applies measured scaling without React resize rerenders.
apps/sim/app/(landing)/components/shared/responsive-design-stage/responsive-design-stage.test.ts	Covers limiting dimensions, inset handling, maximum scale, and unmeasurable hosts.
apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx	Moves animated workflow cards from SVG foreign objects into the shared HTML coordinate surface while retaining SVG edges.
apps/sim/app/(landing)/components/shared/hero-loop-shell/hero-loop-shell.tsx	Migrates the shared landing preview shell from an SVG foreign object to the responsive HTML stage.
apps/sim/app/(landing)/components/shared/responsive-design-stage/index.ts	Re-exports the responsive stage through the requested application alias, resolving the previous review thread.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  Host[Preview host] --> Observer[ResizeObserver]
  Observer --> Scale[Calculate fitted scale]
  Scale --> Stage[Fixed-size HTML design stage]
  Stage --> Sidebar[HTML sidebar and content]
  Stage --> Cards[HTML workflow cards]
  Stage --> Edges[SVG workflow edges]

Loading

_{Reviews (2): Last reviewed commit: "chore(landing): use absolute stage expor..." | Re-trigger Greptile}

[waleedlatif1]

@greptile