Update rule card

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}

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}