feat(card): add padding="none" to Card.Content for edge-to-edge content

[interacsean]

Issue

https://github.com/tailor-inc/platform-planning/issues/1390 (source: https://github.com/tailor-professional-service/knowledge/discussions/221)

What

Card.Content gains padding?: "default" | "none". With "none":

• No padding, so a Table, DataTable or divided list meets the card's border.
• The card's corner radius is carried down (first:/last: rounded-[inherit]) and handed to a direct Table/DataTable child. Their existing overflow clipping keeps row hover and pinned-cell backgrounds inside the rounded corners.
• A nested DataTable drops its own border, so there is no box-in-a-box.
• Cells are not re-inset: Table.Head/Table.Cell already carry first:pl-6/last:pr-6, so the first column lines up with the card title (measured: both at 24px).

<Card.Root>
  <Card.Header title="Line items" />
  <Card.Content padding="none">
    <DataTable.Root value={table}>
      <DataTable.Table />
      <DataTable.Footer>
        <DataTable.Pagination />
      </DataTable.Footer>
    </DataTable.Root>
  </Card.Content>
</Card.Root>

Why

Consumers were zeroing the padding with className="px-0!" (or dropping Card.Content). The intent couldn't be read from the API, and a plain px-0 silently loses to AppShell's astw:px-6 in the cascade.

Reviewer notes

• No overflow on Card.Content on purpose. Content only carries the radius. With overflow-hidden there, AppShell's rule would beat a consumer's overflow-y-auto and break the scrollable-list case.
• Behaviour change vs. the old workaround: px-0! kept the 24px bottom padding. padding="none" removes it, so the table ends on the card's border.
• Open question (not changed here): DataTable.Footer is px-4 and the DataTable toolbar is p-2, so footer and toolbar text sit 8px left of the card title. Standalone DataTables already have the same 8px offset from their cells. Best fixed in DataTable itself as a follow-up, rather than overridden only inside cards.
• Every Card.Content now renders data-padding. Consumer DOM snapshots will pick that attribute up.
• Docs: the document-detail page pattern and styling-theming taught px-0!. All four call sites and the Constraint now use the prop.

Try it

Vite example → Showcase → Card Demo (/showcase/card). A Basics section shows the common compositions: header + content, header only, content only, custom header content, a divided header, and padded text followed by a flush list. The Edge-to-edge section shows a DataTable with a pagination footer, a DataTable ending on a data row (right-pinned column), no header (top corners), a plain Table, and a scrollable divided list.

Checks

type-check, lint, tests (1827), check-dts, docs:check all pass. Changeset: minor.

🤖 Generated with Claude Code

[github-actions]

Code Metrics Report

	main (396a0c7)	#576 (4ad5e7f)	+/-
Coverage	87.6%	87.6%	+0.0%
Test Execution Time	2m20s	2m15s	-5s

Details

  |                     | main (396a0c7) | #576 (4ad5e7f) |  +/-  |
  |---------------------|----------------|----------------|-------|
+ | Coverage            |          87.6% |          87.6% | +0.0% |
  |   Files             |            206 |            206 |     0 |
  |   Lines             |           6089 |           6090 |    +1 |
+ |   Covered           |           5334 |           5335 |    +1 |
+ | Test Execution Time |          2m20s |          2m15s |   -5s |

Code coverage of files in pull request scope (100.0% → 100.0%, patch 100.0%)

Files	Coverage	+/-	Patch Coverage	Status
packages/core/src/components/card/card.tsx	100.0%	0.0%	100.0%	modified

---

Reported by octocov

[interacsean]

/review

[github-actions]

✅ Code Review completed successfully!

Code review complete for PR #576 — no High/Medium issues found in the changed package code under packages/**, so no inline review comments were needed.

Generated by Code Review for #576