From 58205cc9acab387cd6d346984b485bfe4da6d5d8 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 25 Apr 2023 16:19:48 -0400
Subject: [PATCH] UX: introduce min-height for responsive ads (#170)

---
 .../discourse/templates/components/google-adsense.hbs       | 6 +++++-
 assets/stylesheets/adplugin.scss                            | 6 ++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/assets/javascripts/discourse/templates/components/google-adsense.hbs b/assets/javascripts/discourse/templates/components/google-adsense.hbs
index 55ec8bc..871b941 100644
--- a/assets/javascripts/discourse/templates/components/google-adsense.hbs
+++ b/assets/javascripts/discourse/templates/components/google-adsense.hbs
@@ -2,7 +2,11 @@
   <div class="google-adsense-label"><h2>{{i18n
         "adplugin.advertisement_label"
       }}</h2></div>
-  <div class="google-adsense-content" style={{adWrapperStyle}}>
+  <div
+    class="google-adsense-content"
+    id={{if isResponsive "google-adsense__responsive"}}
+    style={{adWrapperStyle}}
+  >
     <ins
       class="adsbygoogle"
       style={{adInsStyle}}
diff --git a/assets/stylesheets/adplugin.scss b/assets/stylesheets/adplugin.scss
index 9198dd2..b1a6afc 100644
--- a/assets/stylesheets/adplugin.scss
+++ b/assets/stylesheets/adplugin.scss
@@ -18,6 +18,12 @@
   width: 100%;
 }
 
+#google-adsense__responsive {
+  // Google strips styles added to parent wrapper classes, so we use this ID
+  // this sets a minimum height to reduce cumulative layout shift
+  min-height: 200px;
+}
+
 .google-adsense .google-adsense-label {
   width: 728px;
   max-width: 100%;