From 00e41c5174f694f30d947417702e467234b4ddd0 Mon Sep 17 00:00:00 2001
From: Aubaid12 <aubaidshamshad@gmail.com>
Date: Sat, 27 Jun 2026 21:14:54 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20free=20tier=20looking=20?=
 =?UTF-8?q?like=20a=20selectable=20card=20when=20it's=20the=20only=20tier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes https://github.com/TryGhost/Ghost/issues/25517

On a site with no paid tiers, the signup modal rendered the free tier inside a bordered, hoverable card (no price, no Choose button) — making it look selectable when there's nothing to choose. This removes the card framing for the only-free case and drops the now-pointless selection click, so the free tier reads as plain info above the Sign up button. Title, description and benefits are kept.
---
 apps/portal/src/components/common/products-section.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/components/common/products-section.js b/apps/portal/src/components/common/products-section.js
index a974359dde5..16b2925066b 100644
--- a/apps/portal/src/components/common/products-section.js
+++ b/apps/portal/src/components/common/products-section.js
@@ -414,6 +414,9 @@ export const ProductsSectionStyles = () => {
         .gh-portal-product-card.only-free {
             margin: 0 0 16px;
             min-height: unset;
+            padding: 0;
+            border: none;
+            background: transparent;
         }
 
         .gh-portal-product-card.only-free .gh-portal-product-card-header {
@@ -691,7 +694,7 @@ function FreeProductCard({products, handleChooseSignup, error}) {
 
     return (
         <>
-            <div className={cardClass} onClick={(e) => {
+            <div className={cardClass} onClick={hasOnlyFree ? undefined : (e) => {
                 e.stopPropagation();
                 setSelectedProduct('free');
             }} data-test-tier="free">