From 8da6222a8918f0c24463c2f83f54d737feb65cd9 Mon Sep 17 00:00:00 2001
From: Antoine Clausse <antoine.clausse@overleaf.com>
Date: Thu, 30 Apr 2026 14:45:36 +0200
Subject: [PATCH] [web] Fix plans CTA plain-link and edu discount clickable
 area overflow (#33243)

* Update .plans-cta-plain-link styles so the clickable area doesn't overflow

* Update .plans-educational-discount-label styles so the clickable area doesn't overflow

* Fix lint

GitOrigin-RevId: cedbaa78a079fd4f7cefe2be9b39252d30ba6355
---
 .../stylesheets/pages/plans-2026.scss         | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/services/web/frontend/stylesheets/pages/plans-2026.scss b/services/web/frontend/stylesheets/pages/plans-2026.scss
index a1e19e2bea..d50af0a7cb 100644
--- a/services/web/frontend/stylesheets/pages/plans-2026.scss
+++ b/services/web/frontend/stylesheets/pages/plans-2026.scss
@@ -284,19 +284,28 @@
         padding-top: calc(var(--secondary-cta-top-padding) - var(--spacing-03));
       }
 
-      // Plain-link and edu discount occupy row 4 of the PAGE subgrid.
-      // Edu discount lives inside the annual period wrapper (a subgrid child),
-      // so two levels of '>' are needed. Plain-link is a direct card-cta child.
-      > .plans-cta-plain-link {
+      .plans-cta-plain-link {
         align-self: start;
         grid-row: 4;
         padding-top: var(--secondary-cta-top-padding);
+        text-align: center;
+
+        a {
+          color: var(--content-secondary);
+          font-size: var(--font-size-02);
+          text-decoration: underline;
+
+          &:hover {
+            color: var(--content-primary);
+          }
+        }
       }
 
       > .only-show-for-specific-plan-period > .plans-educational-discount {
         align-self: center;
         grid-row: 4;
         padding-top: var(--spacing-04);
+        text-align: center;
       }
     }
 
@@ -372,17 +381,6 @@
       cursor: help;
     }
 
-    .plans-cta-plain-link {
-      color: var(--content-secondary);
-      font-size: var(--font-size-02);
-      text-align: center;
-      text-decoration: underline;
-
-      &:hover {
-        color: var(--content-primary);
-      }
-    }
-
     .card-footer {
       background-color: transparent;
       border: none;
@@ -397,7 +395,7 @@
       align-items: center;
       color: var(--content-primary);
       cursor: pointer;
-      display: flex;
+      display: inline-flex;
       gap: var(--spacing-03);
       justify-content: center;
       margin: 0;