Improved dark mode and canvas position in the automations editor

[troyciesco]

no ref

• makes some quick improvements to dark mode for the automations editor. This included passing the colors into react flow via its provided css variables to make it a little easier.
• makes the workflow start closer to the top of the screen, there was a weird gap
• hides the sidebar so the canvas takes up the full screen. this is just with css currently, i think we may need to tweak some of the sidebar setup so things are correct for e.g. screen readers

not perfect or anything yet, just gets things a bit closer

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1d5f12ab-8ead-4997-9199-a7100dd1f76d

📥 Commits

Reviewing files that changed from the base of the PR and between f3e72d1 and fb20c3d.

📒 Files selected for processing (1)

• apps/posts/src/views/Automations/components/automation-canvas.tsx

---

Walkthrough

This PR migrates Automations canvas components to system design tokens, centralizes edge stroke into DEFAULT_EDGE_STROKE (var(--xy-edge-stroke)), and applies it to the tail edge. The ReactFlow setup now computes an initial viewport once and passes it as defaultViewport (removing fitView). The editor root becomes a fixed fullscreen overlay and loading/error/empty states use the updated background token.

Possibly related PRs

• TryGhost/Ghost#27904: Updates to AddStepEdge component rendering logic align with the stroke styling variable change to --xy-edge-stroke in this PR.

Suggested reviewers

• EvanHahn

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: improving dark mode styling and adjusting canvas position in the automations editor.
Description check	✅ Passed	The description clearly relates to the changeset, detailing dark mode improvements, canvas positioning adjustments, and sidebar visibility changes made in the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch improve-automations-dark-mode

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[troyciesco]

i was kind of surprised that i had to do all this and that react flow didn't have an automatic "center horizontally" API that let me just adjust the y position

[EvanHahn]

Yeah, I wonder if they have an issue for this somewhere...fine as is.