From 45be6c1fa9cb513a7643059705e20bc3a18b31e1 Mon Sep 17 00:00:00 2001
From: Aditya Rana <adityarana181105@gmail.com>
Date: Sun, 30 Aug 2026 10:52:05 +0530
Subject: [PATCH] give the three tier cards one height

Fades wraps each child in its own motion.div, so that div became the grid
item and the li inside it sized to its own text. The Bezel's h-full then
resolved against a li that was already only as tall as its content, and the
three cards came out three different heights. It also put a div between ul
and li.

asChild makes Fade render through Slot onto the li itself. No wrapper, the
li is the grid item again, and stretch does what it always did.

The heights cannot be asserted in jsdom, so the test asserts the cause: every
child of that ul is an LI. Verified failing without the fix.
---
 .../src/components/landing/Landing.test.tsx    | 18 ++++++++++++++++++
 apps/web/src/components/landing/Tiers.tsx      |  9 +++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/landing/Landing.test.tsx b/apps/web/src/components/landing/Landing.test.tsx
index 2a40110..c995ff8 100644
--- a/apps/web/src/components/landing/Landing.test.tsx
+++ b/apps/web/src/components/landing/Landing.test.tsx
@@ -97,6 +97,24 @@ describe("the landing page", () => {
     expect(within(index as HTMLElement).getByText("23")).toBeInTheDocument();
   });
 
+  it("makes each tier card its own grid item", () => {
+    renderLanding();
+
+    const list = screen
+      .getByRole("heading", { name: /certainty is the product/i })
+      .closest("section")
+      ?.querySelector("ul");
+    expect(list).not.toBeNull();
+
+    // The heights cannot be asserted here -- jsdom has no layout. What can be
+    // asserted is the cause: a wrapper between the grid and the `li` makes the
+    // wrapper the grid item, so the card sizes to its own text instead of the
+    // row, and the three end up different heights. It is also invalid markup.
+    for (const child of Array.from((list as HTMLElement).children)) {
+      expect(child.tagName).toBe("LI");
+    }
+  });
+
   it("ships a canvas shot for each theme", () => {
     renderLanding();
 
diff --git a/apps/web/src/components/landing/Tiers.tsx b/apps/web/src/components/landing/Tiers.tsx
index cdbd5a4..19b397c 100644
--- a/apps/web/src/components/landing/Tiers.tsx
+++ b/apps/web/src/components/landing/Tiers.tsx
@@ -52,10 +52,15 @@ export function Tiers() {
       {/* Staggered in tier order, so the three arrive most certain first and
           the scale is read in the direction it means something. One gesture
           for the set rather than three cards each deciding for themselves --
-          the same treatment the coverage chips get. */}
+          the same treatment the coverage chips get.
+
+          `asChild` is load-bearing, not tidiness. Without it `Fades` wraps each
+          card in its own motion.div, which becomes the grid item -- the `li`
+          inside then sizes to its own text, so the three cards ended up three
+          different heights. It also put a div between `ul` and `li`. */}
       <ul className="grid gap-4 md:grid-cols-3">
         {animate ? (
-          <Fades inView inViewMargin="-64px" holdDelay={70}>
+          <Fades asChild inView inViewMargin="-64px" holdDelay={70}>
             {cards}
           </Fades>
         ) : (