VIS-PF-02: compact editorial Portfolio rows

src/Components/portfolio/PortfolioCard.tsx

@@ -71,7 +71,6 @@ interface PortfolioCardProps {
   cover: string;
   desc: string;
   details: ReactNode;
-  expanded: boolean;
   headingLevel?: "h2" | "h3";
   disclaimer?: string;
   priority?: boolean;
@@ -86,7 +85,6 @@ export default function PortfolioCard({
   cover,
   desc,
   details,
-  expanded,
   headingLevel = "h3",
   disclaimer,
   priority = false,
@@ -101,32 +99,32 @@ export default function PortfolioCard({
   return (
     <motion.div
       data-nojs-visible
-      className={`border border-gray-200 rounded-2xl shadow-sm bg-white ${expanded || status ? "" : "md:h-[280px] md:overflow-hidden"}`}
+      className="border border-gray-200 rounded-2xl shadow-sm bg-white"
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.45 }}
       viewport={{ once: true }}
     >
-      <div className="flex flex-col md:flex-row">
-        <div className="md:w-5/12">
-          <div className="w-full aspect-[16/9] p-5 md:p-7 rounded-2xl bg-white overflow-hidden flex items-center justify-center">
+      <div className="flex flex-col lg:flex-row">
+        <div className="flex items-center justify-center lg:w-[340px] lg:shrink-0">
+          <div className="w-full p-4 sm:p-5 rounded-2xl bg-white overflow-hidden flex items-center justify-center">
             <PortfolioCoverImage
               cover={cover}
               alt=""
-              className={`w-full h-full object-center rounded-xl ${
+              className={`w-full h-auto max-w-[280px] sm:max-w-[360px] lg:max-w-none aspect-[40/21] object-center rounded-xl ${
                 coverFit === "cover" ? "object-cover" : "object-contain"
               }`}
               priority={priority}
-              sizes="(min-width: 1280px) 457px, (min-width: 768px) calc(41.67vw - 76px), calc(100vw - 88px)"
+              sizes="(min-width: 1024px) 300px, (min-width: 640px) 360px, (min-width: 358px) 280px, calc(100vw - 80px)"
               {...(responsiveCover === undefined
                 ? {}
                 : { responsiveCover })}
             />
           </div>
         </div>
-        <div className="md:w-7/12 p-6">
+        <div className="min-w-0 flex flex-col p-6 lg:flex-1">
           {status && (
-            <p className="mb-2 inline-flex rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-800">
+            <p className="mb-2 inline-flex self-start rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-800">
               {status}
             </p>
           )}
@@ -140,7 +138,7 @@ export default function PortfolioCard({
             </p>
           )}
           <p className="mt-3 text-sm text-gray-600">• {tags}</p>
-          <div className="mt-4 flex items-center gap-4 flex-wrap">
+          <div className="mt-4 flex items-center gap-4 flex-wrap lg:mt-auto lg:pt-4">
             {actions}
           </div>
           {details}

src/pages/PortfolioPage.tsx

@@ -185,7 +185,6 @@ export default function PortfolioPage() {
                       />
                     ) : null
                   }
-                  expanded={detailsExpanded}
                   headingLevel="h2"
                   priority={portfolioIndex === 0}
                   tags={content.tags.join(" · ")}

src/test/NoJsVisibility.test.tsx

@@ -84,7 +84,7 @@ const approvedFiles = {
   },
   "src/Components/portfolio/PortfolioCard.tsx": {
     baselineHash:
-      "82db7710efc1da9799d2b53bc96eb15009f3f5da39aee86f84e3bec56983ecf8",
+      "88eabddb08798b1e6d638a6a7cde97c36afd61dfb32c595fce627894b333e47d",
     markers: 1,
   },
 } as const;

src/test/PortfolioSafety.test.ts

@@ -826,4 +826,45 @@ describe("portfolio architecture invariants", () => {
     expect(faqSource).not.toContain("techAnswer");
     expect(faqSource).not.toMatch(/questions\[\d+\]/);
   });
+
+  it("locks the compact editorial row contract without rigid card heights", () => {
+    const portfolioCardSource = fs.readFileSync(
+      path.join(
+        projectRoot,
+        "src/Components/portfolio/PortfolioCard.tsx",
+      ),
+      "utf8",
+    );
+    const portfolioPageSource = fs.readFileSync(
+      path.join(projectRoot, "src/pages/PortfolioPage.tsx"),
+      "utf8",
+    );
+
+    expect(portfolioCardSource).toContain(
+      'className="flex flex-col lg:flex-row"',
+    );
+    expect(portfolioCardSource).not.toContain("md:flex-row");
+    expect(portfolioCardSource).toContain(
+      "lg:w-[340px] lg:shrink-0",
+    );
+    expect(portfolioCardSource).toContain(
+      "max-w-[280px] sm:max-w-[360px] lg:max-w-none aspect-[40/21]",
+    );
+    expect(portfolioCardSource).toContain(
+      'sizes="(min-width: 1024px) 300px, (min-width: 640px) 360px, (min-width: 358px) 280px, calc(100vw - 80px)"',
+    );
+    expect(portfolioCardSource).toContain(
+      'className="min-w-0 flex flex-col p-6 lg:flex-1"',
+    );
+    expect(portfolioCardSource).toContain("lg:mt-auto lg:pt-4");
+    expect(portfolioCardSource).toContain("inline-flex self-start");
+    expect(portfolioCardSource).not.toContain('expanded: boolean');
+    expect(portfolioPageSource).not.toMatch(
+      /\n\s+expanded=\{detailsExpanded\}/,
+    );
+    expect(portfolioCardSource).not.toMatch(/(?:min-)?h-\[(?:280|360)px\]/);
+    expect(portfolioCardSource).not.toContain("line-clamp");
+    expect(portfolioCardSource).not.toContain("truncate");
+    expect(portfolioCardSource).not.toContain("w-full h-full object-center");
+  });
 });