From 6b3649d3699898031b46dc86a5b432ed6504abc9 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Thu, 29 May 2025 12:04:21 -0700
Subject: [PATCH] Move ads to right sidebar to reduce reflow (#41506)

* Move ads to right sidebar to reduce reflow

* Adjust and fix linter

* More
---
 site/src/layouts/DocsLayout.astro | 15 ++++++++-------
 site/src/scss/_ads.scss           | 30 +++++++++++++++++++++++++++---
 site/src/scss/_masthead.scss      |  2 ++
 site/src/scss/_toc.scss           |  3 +++
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index 3eda2a576b..37e6ec0c2d 100644
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -78,12 +78,12 @@ if (frontmatter.toc) {
         <div class="bd-subtitle">
           {frontmatter.description && <Fragment set:html={processMarkdownToHtml(frontmatter.description)} />}
         </div>
-        <Ads />
       </div>
 
-      {
-        frontmatter.toc && headings && (
-          <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
+
+      <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
+        {
+          frontmatter.toc && headings && (
             <button
               class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none"
               type="button"
@@ -104,9 +104,10 @@ if (frontmatter.toc) {
                 <TableOfContents headings={headings} />
               </nav>
             </div>
-          </div>
-        )
-      }
+          )
+        }
+        <Ads />
+      </div>
 
       <div class="bd-content ps-lg-2">
         {
diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss
index cc56340969..8d006a1568 100644
--- a/site/src/scss/_ads.scss
+++ b/site/src/scss/_ads.scss
@@ -6,10 +6,9 @@
 
 #carbonads {
   position: static;
-  display: block;
   max-width: 400px;
   padding: 15px 15px 15px 160px;
-  margin: 2rem 0;
+  margin: 1rem 0;
   overflow: hidden;
   @include font-size(.8125rem);
   line-height: 1.4;
@@ -31,8 +30,33 @@
   margin-left: -145px;
 }
 
+@container (max-width: 240px) {
+  #carbonads {
+    padding-left: 15px;
+  }
+
+  .carbon-img {
+    display: block;
+    float: none;
+    margin-left: 0;
+  }
+
+  .carbon-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+  }
+
+  .carbon-img > img {
+    width: 100%;
+    max-width: 100% !important;
+    height: auto;
+    @include border-radius(var(--bs-border-radius-sm));
+  }
+}
+
 .carbon-poweredby {
   display: block;
   margin-top: .75rem;
-  color: var(--bs-body-color) !important;
+  color: var(--bs-fg-3) !important;
 }
diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss
index c6566d95d7..c1bcfbc3b4 100644
--- a/site/src/scss/_masthead.scss
+++ b/site/src/scss/_masthead.scss
@@ -54,7 +54,9 @@
   }
 
   #carbonads { // stylelint-disable-line selector-max-id
+    max-width: 400px;
     margin-inline: auto;
+    margin-block: 2rem;
   }
 
   @include media-breakpoint-up(md) {
diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 32bf3cf625..7b840ab743 100644
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -1,6 +1,9 @@
 // stylelint-disable selector-max-type, selector-no-qualifying-type
 
 .bd-toc {
+  font-size: .875rem;
+  container-type: inline-size;
+
   @include media-breakpoint-up(lg) {
     position: sticky;
     top: 5rem;