Skip to content

fix(core): table outer column padding and Card title typography #186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
itsprade merged 1 commit into from
Apr 20, 2026
Merged

fix(core): table outer column padding and Card title typography #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/table-card-typography-padding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tailor-platform/app-shell": patch
---

Adjust `Table` cell padding so the first column uses 24px left inset and the last column uses 24px right inset (middle columns unchanged). Update `Card.Header` titles to `text-lg` to align with `DescriptionCard`, `ActivityCard`, and `ActionPanel`.
2 changes: 1 addition & 1 deletion packages/core/__snapshots__/src__components__card.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Card > snapshots > basic card with header and content 1`] = `"<div data-slot="card" class="astw:bg-card astw:text-card-foreground astw:flex astw:flex-col astw:rounded-xl astw:border astw:shadow-xs"><div data-slot="card-header" class="astw:@container/card-header astw:grid astw:auto-rows-min astw:grid-rows-[auto_auto] astw:items-start astw:gap-2 astw:px-6 astw:pt-6 astw:pb-4 astw:[.border-b]:pb-6"><h3 data-slot="card-title" class="astw:leading-none astw:font-semibold">Title</h3><div data-slot="card-description" class="astw:text-muted-foreground astw:text-sm">Description</div></div><div data-slot="card-content" class="astw:px-6 astw:pb-6">Content</div></div>"`;
exports[`Card > snapshots > basic card with header and content 1`] = `"<div data-slot="card" class="astw:bg-card astw:text-card-foreground astw:flex astw:flex-col astw:rounded-xl astw:border astw:shadow-xs"><div data-slot="card-header" class="astw:@container/card-header astw:grid astw:auto-rows-min astw:grid-rows-[auto_auto] astw:items-start astw:gap-2 astw:px-6 astw:pt-6 astw:pb-4 astw:[.border-b]:pb-6"><h3 data-slot="card-title" class="astw:text-lg astw:font-semibold astw:leading-none astw:text-card-foreground">Title</h3><div data-slot="card-description" class="astw:text-muted-foreground astw:text-sm">Description</div></div><div data-slot="card-content" class="astw:px-6 astw:pb-6">Content</div></div>"`;

exports[`Card > snapshots > card with custom className 1`] = `"<div data-slot="card" class="astw:bg-card astw:text-card-foreground astw:flex astw:flex-col astw:rounded-xl astw:border astw:shadow-xs custom-class"><div data-slot="card-content" class="astw:px-6 astw:pb-6">Content</div></div>"`;
10 changes: 5 additions & 5 deletions packages/core/__snapshots__/src__components__table.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Table > snapshots > basic table with header and body 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:p-2 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item 1</td><td data-slot="table-cell" class="astw:p-2 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Active</td></tr></tbody></table></div>"`;
exports[`Table > snapshots > basic table with header and body 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item 1</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Active</td></tr></tbody></table></div>"`;

exports[`Table > snapshots > empty table 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"></tbody></table></div>"`;
exports[`Table > snapshots > empty table 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Status</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"></tbody></table></div>"`;

exports[`Table > snapshots > table with caption 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><caption data-slot="table-caption" class="astw:text-muted-foreground astw:mt-4 astw:text-sm">A list of items</caption><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:p-2 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item</td></tr></tbody></table></div>"`;
exports[`Table > snapshots > table with caption 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><caption data-slot="table-caption" class="astw:text-muted-foreground astw:mt-4 astw:text-sm">A list of items</caption><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item</td></tr></tbody></table></div>"`;

exports[`Table > snapshots > table with containerClassName 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto custom-container"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:p-2 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item</td></tr></tbody></table></div>"`;
exports[`Table > snapshots > table with containerClassName 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto custom-container"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Name</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Item</td></tr></tbody></table></div>"`;

exports[`Table > snapshots > table with footer 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Product</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Price</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:p-2 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Widget</td><td data-slot="table-cell" class="astw:p-2 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">$10</td></tr></tbody><tfoot data-slot="table-footer" class="astw:border-t astw:font-medium astw:[&amp;>tr]:last:border-b-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:p-2 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Total</td><td data-slot="table-cell" class="astw:p-2 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">$10</td></tr></tfoot></table></div>"`;
exports[`Table > snapshots > table with footer 1`] = `"<div data-slot="table-container" class="astw:relative astw:w-full astw:overflow-x-auto"><table data-slot="table" class="astw:w-full astw:caption-bottom astw:text-sm"><thead data-slot="table-header" class="astw:[&amp;_tr]:border-b"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Product</th><th data-slot="table-head" class="astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Price</th></tr></thead><tbody data-slot="table-body" class="astw:[&amp;_tr:last-child]:border-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Widget</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">$10</td></tr></tbody><tfoot data-slot="table-footer" class="astw:border-t astw:font-medium astw:[&amp;>tr]:last:border-b-0"><tr data-slot="table-row" class="astw:hover:bg-muted/50 astw:data-[state=selected]:bg-muted astw:border-b astw:transition-colors"><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">Total</td><td data-slot="table-cell" class="astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&amp;:has([role=checkbox])]:pr-0 astw:[&amp;>[role=checkbox]]:translate-y-[2px]">$10</td></tr></tfoot></table></div>"`;
2 changes: 1 addition & 1 deletion packages/core/src/components/action-panel/ActionPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export function ActionPanel({ title, actions, className }: ActionPanelProps) {

return (
<Card.Root className={cn("astw:min-w-69.5 astw:w-full", className)}>
<Card.Header title={title} className="astw:text-lg astw:px-8" />
<Card.Header title={title} className="astw:px-8" />
<Card.Content className="astw:px-4 astw:pb-4">
{actions.length === 0 ? (
<p className="astw:py-2 astw:pl-3 astw:text-sm astw:text-muted-foreground">
Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/components/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ function Header({ className, title, description, children, ...props }: HeaderPro
{...props}
>
{title && (
<h3 data-slot="card-title" className="astw:leading-none astw:font-semibold">
<h3
data-slot="card-title"
className="astw:text-lg astw:font-semibold astw:leading-none astw:text-card-foreground"
>
{title}
</h3>
)}
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ function Head({ className, ...props }: React.ComponentProps<"th">) {
<th
data-slot="table-head"
className={cn(
"astw:text-foreground astw:h-10 astw:px-2 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&:has([role=checkbox])]:pr-0 astw:[&>[role=checkbox]]:translate-y-[2px]",
"astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:text-left astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&:has([role=checkbox])]:pr-0 astw:[&>[role=checkbox]]:translate-y-[2px]",
className,
)}
{...props}
Expand All @@ -114,7 +114,7 @@ function Cell({ className, ...props }: React.ComponentProps<"td">) {
<td
data-slot="table-cell"
className={cn(
"astw:p-2 astw:align-middle astw:whitespace-nowrap astw:[&:has([role=checkbox])]:pr-0 astw:[&>[role=checkbox]]:translate-y-[2px]",
"astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&:has([role=checkbox])]:pr-0 astw:[&>[role=checkbox]]:translate-y-[2px]",
className,
)}
{...props}
Expand Down
Loading