fix(ui): align section headings (drop padding=none + redundant inner s-box)

This commit is contained in:
Gerhard Scheikl
2026-05-08 22:47:10 +02:00
parent 093db30b6c
commit 64ac54d3c3
2 changed files with 42 additions and 53 deletions
+31 -37
View File
@@ -140,48 +140,42 @@ export default function InvoicesPage() {
return (
<s-page heading="Invoices">
<s-section heading="Recent orders" padding="none">
<s-box padding="base">
<s-stack direction="block" gap="base">
<s-paragraph>
Generate the invoice for an order, regenerate an unsent draft,
or cancel-and-reissue a sent one. Newest orders appear first.
</s-paragraph>
<s-section heading="Recent orders">
<s-stack direction="block" gap="base">
<s-paragraph>
Generate the invoice for an order, regenerate an unsent draft,
or cancel-and-reissue a sent one. Newest orders appear first.
</s-paragraph>
<s-stack direction="inline" gap="small" alignItems="center">
<FilterChip to="?filter=all" active={filter === "all"} count={counts.all}>
All
</FilterChip>
<FilterChip
to="?filter=missing"
active={filter === "missing"}
count={counts.missing}
>
Missing invoice
</FilterChip>
<FilterChip to="?filter=with" active={filter === "with"} count={counts.with}>
Has invoice
</FilterChip>
</s-stack>
<s-stack direction="inline" gap="small" alignItems="center">
<FilterChip to="?filter=all" active={filter === "all"} count={counts.all}>
All
</FilterChip>
<FilterChip
to="?filter=missing"
active={filter === "missing"}
count={counts.missing}
>
Missing invoice
</FilterChip>
<FilterChip to="?filter=with" active={filter === "with"} count={counts.with}>
Has invoice
</FilterChip>
</s-stack>
</s-box>
</s-stack>
{isLoading ? (
<s-box padding="base">
<s-stack direction="inline" gap="small" alignItems="center">
<s-spinner size="small" accessibilityLabel="Loading orders" />
<s-text tone="neutral">Loading</s-text>
</s-stack>
</s-box>
<s-stack direction="inline" gap="small" alignItems="center">
<s-spinner size="small" accessibilityLabel="Loading orders" />
<s-text tone="neutral">Loading</s-text>
</s-stack>
) : orders.length === 0 ? (
<s-box padding="base">
<s-stack direction="block" gap="base" alignItems="center">
<s-text type="strong">No orders match this filter</s-text>
<s-paragraph tone="neutral">
Try a different filter or wait for new orders.
</s-paragraph>
</s-stack>
</s-box>
<s-stack direction="block" gap="base" alignItems="center">
<s-text type="strong">No orders match this filter</s-text>
<s-paragraph tone="neutral">
Try a different filter or wait for new orders.
</s-paragraph>
</s-stack>
) : (
<s-table>
<s-table-header-row>