Fixed invalid table nesting in settings lists

[9larsons]

What changed

• Render newsletter list columns as flex content within the legacy TableRow cell.
• Apply the same valid structure to outgoing and incoming recommendation lists.
• Remove the latent invalid nesting from the webhooks table.

Why

The legacy TableRow component already renders a spanning <td> containing layout <div> elements. These lists passed TableCell and TableHead children into it, producing <td> or <th> elements beneath <div> and triggering validateDOMNesting warnings in Admin acceptance-test logs.

The current full Admin acceptance log contained three occurrences across the newsletter and recommendations suites. A source scan found the same pattern in incoming recommendations and webhooks, so those are included as well.

Testing

• pnpm nx run @tryghost/admin:test:acceptance -- src/settings/membership/member-welcome-emails.acceptance.test.tsx src/settings/email/newsletters.acceptance.test.tsx src/settings/growth/recommendations.acceptance.test.tsx (42 tests; no DOM-nesting warnings)
• pnpm nx run @tryghost/admin-x-settings:lint
• pnpm nx run @tryghost/admin-x-settings:test:unit (203 tests)

[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: b18fa380-13fe-47ec-bedb-cd3c5c4e1f19

📥 Commits

Reviewing files that changed from the base of the PR and between 123ed9c and e19b0b9.

📒 Files selected for processing (4)

• apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
• apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-list.tsx
• apps/admin-x-settings/src/components/settings/growth/recommendations/incoming-recommendation-list.tsx
• apps/admin-x-settings/src/components/settings/growth/recommendations/recommendation-list.tsx

---

Walkthrough

The PR refactors settings table layouts by replacing TableCell and TableHead markup with Inline and div containers. Webhook counts use formatNumber, and recommendation signup counts switch from numberWithCommas to formatNumber. Newsletter and recommendation rows retain their existing click behavior, conditional rendering, and responsive visibility while changing their layout structure.

Possibly related PRs

• TryGhost/Ghost#29385: Overlapping recommendation-list layout and numeric-formatting changes.

Suggested reviewers: peterzimon

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: fixing invalid table nesting in settings lists.
Description check	✅ Passed	The description matches the changeset and explains the nesting fix across the affected settings lists.
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.

✨ 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 codex/fix-settings-table-nesting

---

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

[nx-cloud]

🤖 Nx Cloud AI Fix

Ensure the fix-ci command is configured to always run in your CI pipeline to get automatic fixes in future runs. For more information, please see https://nx.dev/ci/features/self-healing-ci

---

View your CI Pipeline Execution ↗ for commit e19b0b9

Command	Status	Duration	Result
nx run @tryghost/admin:test:acceptance	✅ Succeeded	4m 3s	View ↗
nx run @tryghost/admin-x-settings:test:acceptance	✅ Succeeded	3m 19s	View ↗
nx run-many -t test:unit -p @tryghost/admin-x-s...	✅ Succeeded	2m 23s	View ↗
nx run ghost-monorepo:lint:boundaries	✅ Succeeded	20s	View ↗
nx run-many -t lint -p @tryghost/admin-x-settin...	✅ Succeeded	51s	View ↗
nx run @tryghost/admin:build	✅ Succeeded	39s	View ↗
nx run-many --target=build --projects=tag:publi...	✅ Succeeded	<1s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-07-16 14:45:23 UTC