fix(frontend): restore CTE card padding and hierarchy

frontend/src/components/ui/card.test.tsx

@@ -0,0 +1,48 @@
+import { render, within } from "@testing-library/react"
+
+import { Card, CardContent, CardFooter, CardHeader } from "./card"
+
+function CardFixture({ size = "default" }: { size?: "default" | "sm" }) {
+  return (
+    <Card data-testid={`${size}-card`} size={size}>
+      <CardHeader>Header</CardHeader>
+      <CardContent>Content</CardContent>
+      <CardFooter>Footer</CardFooter>
+    </Card>
+  )
+}
+
+test("uses concrete Tailwind 3 spacing for default and small cards", () => {
+  const { container } = render(
+    <>
+      <CardFixture />
+      <CardFixture size="sm" />
+    </>
+  )
+
+  const defaultCard = within(container).getByTestId("default-card")
+  const smallCard = within(container).getByTestId("sm-card")
+
+  expect(defaultCard).toHaveClass("gap-4", "py-4")
+  expect(smallCard).toHaveClass("data-[size=sm]:gap-3", "data-[size=sm]:py-3")
+
+  for (const card of [defaultCard, smallCard]) {
+    expect(card.querySelector('[data-slot="card-header"]')).toHaveClass(
+      "px-4",
+      "group-data-[size=sm]/card:px-3"
+    )
+    expect(card.querySelector('[data-slot="card-content"]')).toHaveClass(
+      "px-4",
+      "group-data-[size=sm]/card:px-3"
+    )
+    expect(card.querySelector('[data-slot="card-footer"]')).toHaveClass(
+      "p-4",
+      "group-data-[size=sm]/card:p-3"
+    )
+  }
+
+  for (const element of container.querySelectorAll("[class]")) {
+    expect(element.className).not.toContain("(--card-spacing)")
+    expect(element.className).not.toContain("--spacing(")
+  }
+})

frontend/src/components/ui/card.tsx

@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border border-border/70 bg-card py-(--card-spacing) text-sm text-card-foreground shadow-sm [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl border border-border/70 bg-card py-4 text-sm text-card-foreground shadow-sm data-[size=sm]:gap-3 data-[size=sm]:py-3 [&:has([data-slot=card-footer])]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       )}
       {...props}
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [&:has([data-slot=card-action])]:grid-cols-[1fr_auto] [&:has([data-slot=card-description])]:grid-rows-[auto_auto] [&.border-b]:pb-4 group-data-[size=sm]/card:[&.border-b]:pb-3",
         className
       )}
       {...props}
@@ -73,7 +73,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-content"
-      className={cn("px-(--card-spacing)", className)}
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
       {...props}
     />
   )
@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}