From a0efd262d0417c9dd7ef2c802e13dfbf2793116b Mon Sep 17 00:00:00 2001
From: Rodrigo Opalo Balog <r.opalo@icloud.com>
Date: Thu, 6 Aug 2026 22:22:48 -0400
Subject: [PATCH 1/2] fix(portfolio): restore mobile featured card actions

The Home featured Portfolio card was a plain block with h-full
overflow-hidden, while its content div independently declared h-full.
Without a flex container distributing height between the cover image
and the content, height:100% on the content div resolved against the
whole card instead of the space left after the image, pushing the
mt-auto CTA past the card's clipped bottom edge. The action was
present in the DOM with normal computed styles, just silently clipped
by the ancestor's overflow-hidden.

Makes the card a real flex column so the image and content share the
available height, and lets the content div grow into the remaining
space instead of re-claiming the full card height.
---
 src/Components/PortfolioSection.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Components/PortfolioSection.tsx b/src/Components/PortfolioSection.tsx
index 3ce2171..2b39cd8 100644
--- a/src/Components/PortfolioSection.tsx
+++ b/src/Components/PortfolioSection.tsx
@@ -97,13 +97,13 @@ export default function PortfolioSection() {
             >
               <motion.div
                 data-nojs-visible
-                className="group h-full overflow-hidden rounded-2xl bg-white/95 backdrop-blur border border-gray-200/80 shadow-md transition-shadow duration-300 motion-reduce:transition-none hover:-translate-y-1 hover:shadow-lg"
+                className="group flex h-full flex-col overflow-hidden rounded-2xl bg-white/95 backdrop-blur border border-gray-200/80 shadow-md transition-shadow duration-300 motion-reduce:transition-none hover:-translate-y-1 hover:shadow-lg"
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.45, delay: 0.05 * index }}
                 viewport={{ once: true }}
               >
-                <div className="aspect-[2/1] overflow-hidden bg-white">
+                <div className="aspect-[2/1] shrink-0 overflow-hidden bg-white">
                   <PortfolioCoverImage
                     cover={p.cover}
                     alt=""
@@ -119,7 +119,7 @@ export default function PortfolioSection() {
                       : { responsiveCover: p.responsiveCover })}
                   />
                 </div>
-                <div className="flex h-full flex-col gap-3 p-5 sm:p-6">
+                <div className="flex min-h-0 flex-1 flex-col gap-3 p-5 sm:p-6">
                   <div className="flex flex-wrap items-center gap-2">
                     {p.status !== undefined && (
                       <span className="rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-800">

From d00e6e3d0efd3f0d01797748f74479dc999b281d Mon Sep 17 00:00:00 2001
From: Rodrigo Opalo Balog <r.opalo@icloud.com>
Date: Thu, 6 Aug 2026 22:23:17 -0400
Subject: [PATCH 2/2] test(portfolio): lock mobile action visibility

Locks the Home featured card's flex-column contract (card, cover
wrapper, and content div classes) so the mt-auto CTA cannot silently
regress back to being clipped by the card's overflow-hidden. Updates
the no-JS marker baseline hash and literal-source assertion to match
the corrected className.
---
 src/test/NoJsVisibility.test.tsx |  4 ++--
 src/test/PortfolioSafety.test.ts | 23 +++++++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/test/NoJsVisibility.test.tsx b/src/test/NoJsVisibility.test.tsx
index 7e068ff..f786fe2 100644
--- a/src/test/NoJsVisibility.test.tsx
+++ b/src/test/NoJsVisibility.test.tsx
@@ -69,7 +69,7 @@ const approvedFiles = {
   },
   "src/Components/PortfolioSection.tsx": {
     baselineHash:
-      "c44668e5f882394ab72307105fb20f748a4216cf749aac1f3019500066957b8b",
+      "74d84a2a8057249ed69c0f30f0069db03797ac1fd103722575edc09d9bd53ce8",
     markers: 4,
   },
   "src/Components/SobreMiSection.tsx": {
@@ -178,7 +178,7 @@ describe("targeted no-JavaScript visibility contract", () => {
       "<motion.section\n      data-nojs-visible",
     );
     expect(source("src/Components/PortfolioSection.tsx")).toContain(
-      "<motion.div\n                data-nojs-visible\n                className=\"group h-full",
+      "<motion.div\n                data-nojs-visible\n                className=\"group flex h-full",
     );
     expect(source("src/Components/portfolio/PortfolioCard.tsx")).toContain(
       "return (\n    <motion.div\n      data-nojs-visible",
diff --git a/src/test/PortfolioSafety.test.ts b/src/test/PortfolioSafety.test.ts
index 1359fd3..0abc1b7 100644
--- a/src/test/PortfolioSafety.test.ts
+++ b/src/test/PortfolioSafety.test.ts
@@ -867,4 +867,27 @@ describe("portfolio architecture invariants", () => {
     expect(portfolioCardSource).not.toContain("truncate");
     expect(portfolioCardSource).not.toContain("w-full h-full object-center");
   });
+
+  it("keeps the Home featured card a real flex column so mobile actions stay visible", () => {
+    const portfolioSectionSource = fs.readFileSync(
+      path.join(projectRoot, "src/Components/PortfolioSection.tsx"),
+      "utf8",
+    );
+
+    expect(portfolioSectionSource).toContain(
+      'className="group flex h-full flex-col overflow-hidden rounded-2xl',
+    );
+    expect(portfolioSectionSource).toContain(
+      'className="aspect-[2/1] shrink-0 overflow-hidden bg-white"',
+    );
+    expect(portfolioSectionSource).toContain(
+      'className="flex min-h-0 flex-1 flex-col gap-3 p-5 sm:p-6"',
+    );
+    expect(portfolioSectionSource).not.toMatch(
+      /className="group h-full overflow-hidden rounded-2xl/,
+    );
+    expect(portfolioSectionSource).not.toContain(
+      'className="flex h-full flex-col gap-3 p-5 sm:p-6"',
+    );
+  });
 });