From cae4df261e964fb8f8836eb32b2001784c916a38 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sat, 11 Apr 2026 00:43:07 -0600
Subject: [PATCH] Update rule card

---
 .../cards/RuleCard/RuleCard.view.tsx          | 26 +++++++++++++------
 .../TemplateReviewCard/TemplateReviewCard.tsx |  6 ++++-
 .../CreateFlowLockupCardStepShell.tsx         |  4 +--
 app/create/final-review/page.tsx              |  4 ++-
 app/create/review-template/[slug]/page.tsx    |  3 +++
 app/create/review/page.tsx                    |  4 ++-
 6 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/app/components/cards/RuleCard/RuleCard.view.tsx b/app/components/cards/RuleCard/RuleCard.view.tsx
index a00b5db..c58c3a9 100644
--- a/app/components/cards/RuleCard/RuleCard.view.tsx
+++ b/app/components/cards/RuleCard/RuleCard.view.tsx
@@ -39,13 +39,19 @@ export function RuleCardView({
     className?.includes("pb-[");
   const hasResponsiveGap = className?.includes("gap-[");
 
-  const cardPadding = hasResponsivePadding
-    ? "" // If className has responsive padding, don't add size-based padding
-    : isLarge || isSmall
-      ? "p-[24px]"
-      : isMedium
-        ? "p-[16px]"
-        : "pb-[24px] pt-[12px] px-[12px]"; // XS: asymmetric padding
+  // Expanded + size: uniform padding on all sides (overrides conflicting utilities from `className`).
+  const cardPadding =
+    expanded && isLarge
+      ? "!p-[24px]"
+      : expanded && isMedium
+        ? "!p-[16px]"
+        : hasResponsivePadding
+          ? ""
+          : isLarge || isSmall
+            ? "p-[24px]"
+            : isMedium
+              ? "p-[16px]"
+              : "pb-[24px] pt-[12px] px-[12px]"; // XS: asymmetric padding
   const cardGap = expanded
     ? "gap-[16px]"
     : hasResponsiveGap
@@ -245,7 +251,11 @@ export function RuleCardView({
         <>
           {/* Categories Section - Using MultiSelect */}
           {categories && categories.length > 0 && (
-            <div className="flex flex-col gap-[16px] items-start px-[12px] relative shrink-0 w-full">
+            <div
+              className={`flex flex-col gap-[16px] items-start relative shrink-0 w-full ${
+                expanded && (isLarge || isMedium) ? "px-0" : "px-[12px]"
+              }`}
+            >
               {categories.map((category, categoryIndex) => (
                 <MultiSelect
                   key={categoryIndex}
diff --git a/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx b/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx
index de7ef98..81977b8 100644
--- a/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx
+++ b/app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx
@@ -2,6 +2,7 @@
 
 import Image from "next/image";
 import RuleCard from "../RuleCard";
+import type { RuleCardProps } from "../RuleCard/RuleCard.types";
 import { getAssetPath } from "../../../../lib/assetUtils";
 import type { RuleTemplateDto } from "../../../../lib/create/fetchTemplates";
 import {
@@ -22,6 +23,8 @@ export interface TemplateReviewCardProps {
   template: RuleTemplateDto;
   /** Merged onto RuleCard `className` (e.g. final-review desktop vs mobile radius/padding). */
   ruleCardClassName?: string;
+  /** RuleCard size; create-flow passes `L` at/above `md`, `M` below (640px). */
+  size?: RuleCardProps["size"];
 }
 
 /**
@@ -31,6 +34,7 @@ export interface TemplateReviewCardProps {
 export function TemplateReviewCard({
   template,
   ruleCardClassName = "",
+  size = "L",
 }: TemplateReviewCardProps) {
   const catalog = getGovernanceTemplateCatalogEntry(template.slug);
   const pres = catalog ?? FALLBACK_PRESENTATION;
@@ -42,7 +46,7 @@ export function TemplateReviewCard({
       title={template.title}
       description={summary}
       expanded
-      size="L"
+      size={size}
       categories={categories}
       backgroundColor={pres.backgroundColor}
       className={ruleCardClassName}
diff --git a/app/create/components/CreateFlowLockupCardStepShell.tsx b/app/create/components/CreateFlowLockupCardStepShell.tsx
index e75a001..49860f3 100644
--- a/app/create/components/CreateFlowLockupCardStepShell.tsx
+++ b/app/create/components/CreateFlowLockupCardStepShell.tsx
@@ -4,9 +4,9 @@ import type { ReactNode } from "react";
 import { CreateFlowHeaderLockup } from "./CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "./CreateFlowStepShell";
 
-/** Shared `RuleCard` / template card chrome: matches final-review desktop + mobile padding and radius. */
+/** Shared `RuleCard` / template card chrome: width + radius; padding comes from `RuleCard` (L+expanded = 24px). */
 export const CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS =
-  "w-full min-w-0 rounded-[12px] p-4 md:rounded-[24px] md:!max-w-full md:!w-full md:p-0";
+  "w-full min-w-0 rounded-[12px] md:rounded-[24px] md:!max-w-full md:!w-full";
 
 type CreateFlowLockupCardStepShellProps = {
   lockupTitle: string;
diff --git a/app/create/final-review/page.tsx b/app/create/final-review/page.tsx
index 1e32aea..303d24d 100644
--- a/app/create/final-review/page.tsx
+++ b/app/create/final-review/page.tsx
@@ -5,6 +5,7 @@ import RuleCard from "../../components/cards/RuleCard";
 import type { Category } from "../../components/cards/RuleCard/RuleCard.types";
 import { useMessages, useTranslation } from "../../contexts/MessagesContext";
 import { useCreateFlow } from "../context/CreateFlowContext";
+import { useCreateFlowMdUp } from "../hooks/useCreateFlowMdUp";
 import {
   CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS,
   CreateFlowLockupCardStepShell,
@@ -29,6 +30,7 @@ function buildFinalReviewCategories(
  */
 export default function FinalReviewPage() {
   const { state } = useCreateFlow();
+  const mdUp = useCreateFlowMdUp();
   const t = useTranslation("create.finalReview");
   const m = useMessages();
 
@@ -56,7 +58,7 @@ export default function FinalReviewPage() {
       <RuleCard
         title={ruleCardTitle}
         description={ruleCardDescription}
-        size="L"
+        size={mdUp ? "L" : "M"}
         expanded={true}
         backgroundColor="bg-[#c9fef9]"
         logoUrl="/assets/Vector_MutualAid.svg"
diff --git a/app/create/review-template/[slug]/page.tsx b/app/create/review-template/[slug]/page.tsx
index 6c3f004..9e287fd 100644
--- a/app/create/review-template/[slug]/page.tsx
+++ b/app/create/review-template/[slug]/page.tsx
@@ -14,6 +14,7 @@ import {
   CreateFlowLockupCardStepShell,
 } from "../../components/CreateFlowLockupCardStepShell";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
+import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 
 interface PageProps {
   params: Promise<{ slug: string }>;
@@ -26,6 +27,7 @@ interface PageProps {
 export default function ReviewTemplatePage({ params }: PageProps) {
   const { slug: rawSlug } = use(params);
   const slug = decodeURIComponent(rawSlug);
+  const mdUp = useCreateFlowMdUp();
   const t = useTranslation("create.templateReview");
 
   const [template, setTemplate] = useState<RuleTemplateDto | null>(null);
@@ -94,6 +96,7 @@ export default function ReviewTemplatePage({ params }: PageProps) {
       <TemplateReviewCard
         template={template}
         ruleCardClassName={CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS}
+        size={mdUp ? "L" : "M"}
       />
     </CreateFlowLockupCardStepShell>
   );
diff --git a/app/create/review/page.tsx b/app/create/review/page.tsx
index 2ed87e7..6d704da 100644
--- a/app/create/review/page.tsx
+++ b/app/create/review/page.tsx
@@ -3,10 +3,12 @@
 import RuleCard from "../../components/cards/RuleCard";
 import { useTranslation } from "../../contexts/MessagesContext";
 import { CreateFlowHeaderLockup } from "../components/CreateFlowHeaderLockup";
+import { useCreateFlowMdUp } from "../hooks/useCreateFlowMdUp";
 import { CreateFlowStepShell } from "../components/CreateFlowStepShell";
 
 /** Mid-flow review step (after upload, before cards). */
 export default function ReviewPage() {
+  const mdUp = useCreateFlowMdUp();
   const t = useTranslation("create.review");
 
   return (
@@ -26,7 +28,7 @@ export default function ReviewPage() {
           <RuleCard
             title={t("ruleCard.title")}
             description={t("ruleCard.description")}
-            size="L"
+            size={mdUp ? "L" : "M"}
             expanded={false}
             backgroundColor="bg-[#c9fef9]"
             logoUrl="/assets/Vector_MutualAid.svg"