Update rule card

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;

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"

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>
   );

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"