Automations UI refinements

[peterzimon]

What changed

• Refined the automations list into a more compact settings-list treatment by removing the desktop-only table header, adding a top border, tightening the skeleton rows, and right-aligning the LIVE/OFF status column.
• Updated the automation canvas with a light grey dotted React Flow background, darker dot pattern, and subtler sidebar shadow treatment.
• Adjusted automation step cards so selected cards keep the darker selected outline while hover borders only apply to unselected cards.
• Polished editor controls by switching the add-step edge/button treatment from blue to green.
• Tweaked the automation editor header typography, icon-button sizing, menu width, and wait input height.

Why

These are beta UI refinements for Automations. The goal is to make the list easier to scan, make the canvas feel more intentionally designed, and keep editor controls visually consistent with the action treatment.

Validation

• Pre-commit lint-staged passed for the touched files across the commits.
• Targeted ESLint checks passed for the edited Automations TSX files.
• pnpm --filter posts test -- automations-list.test.tsx currently fails because the existing test still expects Automation and Status column headers, while this branch intentionally removes that table header.

[coderabbitai]

Walkthrough

The PR includes two independent updates: a patch version bump for the ActivityPub package (3.1.29 → 3.1.30) and a visual styling refresh across Automations editor components. The UI changes apply a green theme to step insertion edges, refine the automation canvas with adjusted component styling and a dotted React Flow background, update the header layout with larger typography and adjusted button sizing, and restructure the automations list to use a headerless table format. A unit test was updated to verify the new row-based rendering approach.

Possibly related PRs

• TryGhost/Ghost#27904: Introduces the step-insertion editor components that this PR applies follow-up UI/styling refinements to.
• TryGhost/Ghost#27973: Also modifies automation-canvas.tsx NodeShell styling and sidebar/background UI in the automation canvas.
• TryGhost/Ghost#27956: Overlaps on canvas edge styling and add-step-edge theme changes in the same components.

Suggested labels

ok to merge for me

Suggested reviewers

• troyciesco
• EvanHahn

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Automations UI refinements' clearly and concisely summarizes the main changes in the changeset, which are focused on UI/UX improvements to the Automations feature.
Description check	✅ Passed	The description is directly related to the changeset, providing clear details about what changed (UI refinements), why (beta improvements), and validation status.
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 NY-1312/automations-beta-ui-refinements

---

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.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/posts/src/views/Automations/components/automations-list.tsx (1)

47-80: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Preserve accessible table semantics after removing visible headers.

Line 47 renders a data table without header cells, which reduces screen-reader context for the status column. Keep headers visually hidden (sr-only) instead of removing them completely.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/posts/src/views/Automations/components/automations-list.tsx` around
lines 47 - 80, The table currently renders data rows without any header cells,
harming screen-reader context; add a visually hidden header row above the mapped
rows using semantic header cells for the columns (e.g., a TableRow containing
two header cells for "Name" and "Status" with className="sr-only" or by
rendering TableCell as <th> / passing as="th"), so keep the visual layout
unchanged while restoring accessible table semantics for the status column
readout used by AutomationStatusBadge and the mapped automations rows.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@apps/posts/src/views/Automations/components/automations-list.tsx`:
- Around line 47-80: The table currently renders data rows without any header
cells, harming screen-reader context; add a visually hidden header row above the
mapped rows using semantic header cells for the columns (e.g., a TableRow
containing two header cells for "Name" and "Status" with className="sr-only" or
by rendering TableCell as <th> / passing as="th"), so keep the visual layout
unchanged while restoring accessible table semantics for the status column
readout used by AutomationStatusBadge and the mapped automations rows.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6e1b1afb-2dd6-414b-96a1-da0482a7f2be

📥 Commits

Reviewing files that changed from the base of the PR and between 7b7db30 and fd61da9.

📒 Files selected for processing (6)

• apps/activitypub/package.json
• apps/posts/src/views/Automations/components/add-step-edge.tsx
• apps/posts/src/views/Automations/components/automation-canvas.tsx
• apps/posts/src/views/Automations/components/automation-header.tsx
• apps/posts/src/views/Automations/components/automations-list.tsx
• apps/posts/test/unit/views/automations/automations-list.test.tsx