From c759f419a1868676b8e57fcffc36b4d1cb3b8732 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Wed, 30 Aug 2023 17:41:22 +0800
Subject: [PATCH] Added max padding limit to Signup and Header cards

refs https://forum.ghost.org/t/anyone-else-seeing-page-too-wide-errors/40695

- google search console snapshots websites with their full height instead of scrolling
- that makes the value of vmax too much, especially when a page has lots of content
- this fixes the issue by adding max limit to the padding values with vmax
---
 .../core/frontend/src/cards/css/header_v2.css | 18 +++++++-------
 .../core/frontend/src/cards/css/signup.css    | 24 +++++++++----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/ghost/core/core/frontend/src/cards/css/header_v2.css b/ghost/core/core/frontend/src/cards/css/header_v2.css
index 1220020f5e..fecfff3640 100644
--- a/ghost/core/core/frontend/src/cards/css/header_v2.css
+++ b/ghost/core/core/frontend/src/cards/css/header_v2.css
@@ -35,30 +35,30 @@
     align-items: flex-start;
     justify-content: center;
     height: 100%;
-    padding: 6.4vmax 4vmax;
+    padding: min(6.4vmax, 120px) min(4vmax, 80px);
     background-size: cover;
     background-position: center;
     text-align: left;
 }
 
 .kg-width-wide .kg-header-card-text {
-    padding: 10vmax 6.4vmax;
+    padding: min(10vmax, 220px) min(6.4vmax, 140px);
 }
 
 .kg-width-full .kg-header-card-text {
-    padding: 12vmax 0;
+    padding: min(12vmax, 260px) 0;
 }
 
 .kg-layout-split .kg-header-card-text {
-    padding: 12vmax 4vmax;
+    padding: min(12vmax, 260px) min(4vmax, 80px);
 }
 
 .kg-layout-split.kg-content-wide .kg-header-card-text {
-    padding: 10vmax 0 10vmax 4vmax;
+    padding: min(10vmax, 220px) 0 min(10vmax, 220px) min(4vmax, 80px);
 }
 
 .kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-text {
-    padding: 10vmax 4vmax 10vmax 0;
+    padding: min(10vmax, 220px) min(4vmax, 80px) min(10vmax, 220px) 0;
 }
 
 .kg-swapped .kg-header-card-text {
@@ -160,7 +160,7 @@
 }
 
 .kg-header-card.kg-width-full h3.kg-header-card-subheading:not(.kg-layout-split h3.kg-header-card-subheading) {
-    max-width: 65vmax;
+    max-width: min(65vmax, 1200px);
     font-size: clamp(1.05em, 2vw, 2.6rem);
 }
 
@@ -227,12 +227,12 @@
     }
 
     .kg-width-wide .kg-header-card-text {
-        padding: 6.4vmax 4vmax;
+        padding: min(6.4vmax, 120px) min(4vmax, 80px);
     }
 
     .kg-layout-split.kg-content-wide .kg-header-card-text,
     .kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-text {
-        padding: 9.6vmax 0;
+        padding: min(9.6vmax, 180px) 0;
     }
 
     .kg-header-card.kg-width-full h3.kg-header-card-subheading:not(.kg-layout-split h3.kg-header-card-subheading) {
diff --git a/ghost/core/core/frontend/src/cards/css/signup.css b/ghost/core/core/frontend/src/cards/css/signup.css
index e7de9ac816..aac6106454 100644
--- a/ghost/core/core/frontend/src/cards/css/signup.css
+++ b/ghost/core/core/frontend/src/cards/css/signup.css
@@ -28,30 +28,30 @@
     align-items: flex-start;
     justify-content: center;
     height: 100%;
-    padding: 4vmax;
+    padding: min(4vmax, 80px);
     background-size: cover;
     background-position: center;
     text-align: left;
 }
 
 .kg-width-wide .kg-signup-card-text {
-    padding: 6.4vmax;
+    padding: min(6.4vmax, 120px);
 }
 
 .kg-width-full .kg-signup-card-text {
-    padding: 12vmax 0;
+    padding: min(12vmax, 260px) 0;
 }
 
 .kg-layout-split .kg-signup-card-text {
-    padding: 12vmax 4vmax;
+    padding: min(12vmax, 260px) min(4vmax, 80px);
 }
 
 .kg-layout-split.kg-content-wide .kg-signup-card-text {
-    padding: 10vmax 0 10vmax 4vmax;
+    padding: min(10vmax, 220px) 0 min(10vmax, 220px) min(4vmax, 80px);
 }
 
 .kg-layout-split.kg-content-wide.kg-swapped .kg-signup-card-text {
-    padding: 10vmax 4vmax 10vmax 0;
+    padding: min(10vmax, 220px) min(4vmax, 80px) min(10vmax, 220px) 0;
 }
 
 .kg-swapped .kg-signup-card-text {
@@ -153,7 +153,7 @@
 }
 
 .kg-signup-card.kg-width-full h3.kg-signup-card-subheading:not(.kg-layout-split h3.kg-signup-card-subheading) {
-    max-width: 65vmax;
+    max-width: min(65vmax, 1200px);
     font-size: clamp(1.05em, 2vw, 2.6rem);
 }
 
@@ -176,17 +176,17 @@
 
 .kg-signup-card-heading + .kg-signup-card-form,
 .kg-signup-card-subheading + .kg-signup-card-form {
-    margin: 2.4vmax 0 0;
+    margin: min(2.4vmax, 48px) 0 0;
 }
 
 .kg-width-wide .kg-signup-card-heading + .kg-signup-card-form,
 .kg-width-wide .kg-signup-card-subheading + .kg-signup-card-form {
-    margin: 3.2vmax 0 0;
+    margin: min(3.2vmax, 64px) 0 0;
 }
 
 .kg-width-full .kg-signup-card-heading + .kg-signup-card-form,
 .kg-width-full .kg-signup-card-subheading + .kg-signup-card-form {
-    margin: 4vmax 0 0;
+    margin: min(4vmax, 80px) 0 0;
 }
 
 .kg-signup-card-fields {
@@ -338,12 +338,12 @@
     }
 
     .kg-width-wide .kg-signup-card-text {
-        padding: 6.4vmax 4vmax;
+        padding: min(6.4vmax, 120px) min(4vmax, 80px);
     }
 
     .kg-layout-split.kg-content-wide .kg-signup-card-text,
     .kg-layout-split.kg-content-wide.kg-swapped .kg-signup-card-text {
-        padding: 9.6vmax 0;
+        padding: min(9.6vmax, 180px) 0;
     }
 
     .kg-signup-card.kg-width-full h3.kg-signup-card-subheading:not(.kg-layout-split h3.kg-signup-card-subheading) {