fix(components): Adjust cell and headerCell padding in DataTable

[taylorvnoj]

BLOCKED; Design brainstorming

Motivations

Updates DataTable cell padding to provide better visual alignment with the container edges. First and last cells/headerCells/pagination now have increased horizontal padding that scales with viewport size.

Breakpoint	First/Last Cell Padding
Default	--space-base
Medium+	--space-large

Changes

Changed

Before

All cells had uniform horizontal padding of --space-base at all screen sizes.

After

	Mobile	Medium+
First cell left padding	--space-base	--space-large
Middle cells	--space-base	--space-base
Last cell right padding	--space-base	--space-large

Note:
The footer (DataTable.Footer) is a semantic HTML container (<tfoot> → <tr> → <td>) that can hold different types of content. When you use DataTable.Pagination inside the footer, the pagination component applies its own responsive padding via the .pagination CSS class. However, when you put custom content directly in the footer (like the "Current balance" row in DoubleFooter), that content doesn't use the pagination component, so it doesn't get the padding automatically. We shouldn't add padding directly to the footer's <td> because that would cause double padding when pagination is used inside it. So the footer stays as a borderless container, pagination handles its own padding, and custom footer content needs inline padding to match.

Testing

run Storybook, go to Lists and Tables > DataTable > Web > Composable
You can see that on screens medium + the padding on the left most edge and right most edge are 24px
On small screens that snaps to 16px
Note: "original" DataTable is not affected

Changes can be
tested via Pre-release

---

In Atlantis we use Github's built in pull request reviews.

[github-actions]

Published Pre-release for a325529 with versions:

  - @jobber/components@6.107.1-JOB-147746-a325529.4+a32552906

To install the new version(s) for Web run:

npm install @jobber/components@6.107.1-JOB-147746-a325529.4+a32552906

[cloudflare-workers-and-pages]

Deploying atlantis with    Cloudflare Pages

Latest commit:	a325529
Status:	✅  Deploy successful!
Preview URL:	https://3dddf51c.atlantis.pages.dev
Branch Preview URL:	https://job-147746-datatable-padding.atlantis.pages.dev

View logs