feat(tip): refine single-screen payment layout

src/app/_components/payment/__tests__/payment-method-selector.test.tsx

@@ -62,6 +62,28 @@ describe("PaymentMethodSelector", () => {
     );
   });
 
+  it("renders compact controls without the caption", () => {
+    const html = renderToStaticMarkup(
+      <PaymentMethodSelector
+        config={{
+          canChoosePaymentMethod: true,
+          initialPayChannel: "ezpay",
+          showPaymentMethodSelector: true,
+        }}
+        value="ezpay"
+        density="compact"
+        caption="This caption is hidden"
+        analyticsKey="tip.payment_method"
+        onChange={() => undefined}
+      />,
+    );
+
+    expect(html).toContain('data-density="compact"');
+    expect(html).toContain("Payment Method");
+    expect(html).not.toContain("This caption is hidden");
+    expect(html).toContain("min-h-11");
+  });
+
   it("does not render when payment method selection is unavailable", () => {
     const html = renderToStaticMarkup(
       <PaymentMethodSelector

src/app/_components/payment/payment-method-selector.tsx

@@ -24,6 +24,7 @@ const PAYMENT_METHODS: readonly {
 export interface PaymentMethodSelectorProps {
   config: PaymentMethodConfig;
   value: PayChannel;
+  density?: "default" | "compact";
   disabled?: boolean;
   caption?: string;
   className?: string;
@@ -34,6 +35,7 @@ export interface PaymentMethodSelectorProps {
 export function PaymentMethodSelector({
   config,
   value,
+  density = "default",
   disabled = false,
   caption = "Stripe by default",
   className,
@@ -41,6 +43,7 @@ export function PaymentMethodSelector({
   onChange,
 }: PaymentMethodSelectorProps) {
   if (!config.showPaymentMethodSelector) return null;
+  const isCompact = density === "compact";
 
   const paymentMethods =
     config.initialPayChannel === "ezpay"
@@ -51,26 +54,31 @@ export function PaymentMethodSelector({
 
   return (
     <section
-      className={`flex flex-col gap-[clamp(8px,1.852vw,10px)] ${className ?? ""}`.trim()}
+      className={`flex flex-col ${isCompact ? "gap-1.5" : "gap-[clamp(8px,1.852vw,10px)]"} ${className ?? ""}`.trim()}
+      data-density={density}
       aria-labelledby="payment-method-title"
     >
-      <div className="flex items-baseline justify-between gap-sm px-xs">
+      <div
+        className={`flex items-baseline justify-between gap-sm ${isCompact ? "px-0.5" : "px-xs"}`}
+      >
         <h2
           id="payment-method-title"
-          className="m-0 text-(length:--responsive-card-title,var(--font-size-lg)) font-bold leading-[1.2] text-auth-text-primary"
+          className={`m-0 font-bold leading-[1.2] text-auth-text-primary ${isCompact ? "text-sm" : "text-(length:--responsive-card-title,var(--font-size-lg))"}`}
           style={{ fontFamily: "var(--font-athelas), var(--font-system)" }}
         >
           Payment Method
         </h2>
-        <span className="whitespace-nowrap text-(length:--responsive-caption,var(--font-size-sm)) leading-[1.2] text-text-secondary">
-          {caption}
-        </span>
+        {!isCompact ? (
+          <span className="whitespace-nowrap text-(length:--responsive-caption,var(--font-size-sm)) leading-[1.2] text-text-secondary">
+            {caption}
+          </span>
+        ) : null}
       </div>
       <div className="grid grid-cols-2 gap-sm">
         {paymentMethods.map((method) => {
           const selected = method.channel === value;
           const classes = [
-            "flex min-h-[clamp(54px,11.481vw,62px)] cursor-pointer items-center justify-center rounded-(--responsive-card-radius-sm,18px) px-[clamp(12px,2.593vw,14px)] py-[clamp(9px,1.852vw,10px)] text-center font-[inherit] text-[#3c3b3b] transition-[border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-72",
+            `flex cursor-pointer items-center justify-center text-center font-[inherit] text-[#3c3b3b] transition-[border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-72 ${isCompact ? "min-h-11 rounded-2xl px-2 py-1.5" : "min-h-[clamp(54px,11.481vw,62px)] rounded-(--responsive-card-radius-sm,18px) px-[clamp(12px,2.593vw,14px)] py-[clamp(9px,1.852vw,10px)]"}`,
             selected
               ? "border-2 border-[#f657a0] bg-[#fff4f9] shadow-[0_8px_18px_rgba(217,47,127,0.24),0_0_0_3px_rgba(217,47,127,0.18)] -translate-y-0.5"
               : "border border-[rgba(246,87,160,0.18)] bg-white shadow-[0_5px_7px_0_rgba(247,89,168,0.08)]",
@@ -97,7 +105,7 @@ export function PaymentMethodSelector({
                   aria-hidden="true"
                   width={122}
                   height={29}
-                  className="block max-h-8.5 w-[min(100%,92px)] object-contain"
+                  className={`block object-contain ${isCompact ? "max-h-7 w-[min(100%,80px)]" : "max-h-8.5 w-[min(100%,92px)]"}`}
                 />
               ) : (
                 <span className="text-(length:--responsive-body,16px) font-bold leading-[1.1] text-[#1e1e1e]">