From 618d97fb9e3d80b9922520a7ac352159ce65197b Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 4 Dec 2020 11:37:40 +0100
Subject: [PATCH] fix: avoid layout shift due to ads

---
 src/client/theme-default/Layout.vue               |  2 +-
 src/client/theme-default/components/CarbonAds.vue | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index c7b820ee..b049f91c 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -37,7 +37,7 @@
       <template #top>
         <slot name="page-top-ads">
           <CarbonAds
-            v-if="theme.carbonAds"
+            v-if="theme.carbonAds && theme.carbonAds.carbon"
             :key="'carbon' + page.relativePath"
             :code="theme.carbonAds.carbon"
             :placement="theme.carbonAds.placement"
diff --git a/src/client/theme-default/components/CarbonAds.vue b/src/client/theme-default/components/CarbonAds.vue
index 7f3e6d6a..94814564 100644
--- a/src/client/theme-default/components/CarbonAds.vue
+++ b/src/client/theme-default/components/CarbonAds.vue
@@ -26,14 +26,14 @@ onMounted(() => {
   border-radius: 4px;
   margin: 0 auto;
   max-width: 280px;
-  font-size: .75rem;
-  background-color: rgba(255, 255, 255, .8);
+  font-size: 0.75rem;
+  background-color: rgba(255, 255, 255, 0.8);
 }
 
 .carbon-ads::after {
   clear: both;
   display: block;
-  content: "";
+  content: '';
 }
 
 @media (min-width: 420px) {
@@ -49,6 +49,13 @@ onMounted(() => {
   }
 }
 
+@media (max-width: 420px) {
+  .carbon-ads {
+    /* Avoid layout shift */
+    height: 105px;
+  }
+}
+
 @media (min-width: 1400px) {
   .carbon-ads {
     position: fixed;
@@ -62,7 +69,7 @@ onMounted(() => {
 
 .carbon-ads ::v-deep(.carbon-img) {
   float: left;
-  margin-right: .75rem;
+  margin-right: 0.75rem;
   max-width: 100px;
   border: 1px solid var(--c-divider);
 }