From 16c060146a09afcb27500066d85aa2da6ebbfd35 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 28 May 2025 15:37:38 -0700
Subject: [PATCH 1/4] Move ads to right sidebar to reduce reflow

---
 site/src/layouts/DocsLayout.astro | 15 ++++++++-------
 site/src/scss/_ads.scss           | 32 +++++++++++++++++++++++++++----
 site/src/scss/_masthead.scss      |  1 +
 site/src/scss/_toc.scss           |  3 +++
 4 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index 3eda2a576bd9..37e6ec0c2d25 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 cc5634096976..7d8762a1cdd4 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;
+  max-width: 400px;
   overflow: hidden;
   @include font-size(.8125rem);
   line-height: 1.4;
@@ -31,8 +30,33 @@
   margin-left: -145px;
 }
 
+@container (max-width: 280px) {
+  #carbonads {
+    padding-left: 15px;
+  }
+
+  .carbon-img {
+    float: none;
+    display: block;
+    margin-left: 0;
+  }
+
+  .carbon-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+  }
+
+  .carbon-img > img {
+    width: 100%;
+    height: auto;
+    max-width: 100% !important;
+    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 c6566d95d73d..c8b3a780f54c 100644
--- a/site/src/scss/_masthead.scss
+++ b/site/src/scss/_masthead.scss
@@ -55,6 +55,7 @@
 
   #carbonads { // stylelint-disable-line selector-max-id
     margin-inline: auto;
+    max-width: 400px;
   }
 
   @include media-breakpoint-up(md) {
diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 32bf3cf625c5..7b840ab7437b 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;

From d217b758eeccca9d70d9e185de693bd2f6a1b430 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 29 May 2025 11:35:12 -0700
Subject: [PATCH 2/4] Adjust and fix linter

---
 site/src/scss/_ads.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss
index 7d8762a1cdd4..ba339d50a0a6 100644
--- a/site/src/scss/_ads.scss
+++ b/site/src/scss/_ads.scss
@@ -6,9 +6,9 @@
 
 #carbonads {
   position: static;
+  max-width: 400px;
   padding: 15px 15px 15px 160px;
   margin: 1rem 0;
-  max-width: 400px;
   overflow: hidden;
   @include font-size(.8125rem);
   line-height: 1.4;
@@ -30,7 +30,7 @@
   margin-left: -145px;
 }
 
-@container (max-width: 280px) {
+@container (max-width: 240px) {
   #carbonads {
     padding-left: 15px;
   }
@@ -51,7 +51,7 @@
     width: 100%;
     height: auto;
     max-width: 100% !important;
-    border-radius: var(--bs-border-radius-sm);
+    @include border-radius(var(--bs-border-radius-sm));
   }
 }
 

From 17e38e1a7094a866845b786ff79e95817eea5c6f Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 29 May 2025 11:44:33 -0700
Subject: [PATCH 3/4] More

---
 site/src/scss/_ads.scss      | 4 ++--
 site/src/scss/_masthead.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss
index ba339d50a0a6..8d006a15681f 100644
--- a/site/src/scss/_ads.scss
+++ b/site/src/scss/_ads.scss
@@ -36,8 +36,8 @@
   }
 
   .carbon-img {
-    float: none;
     display: block;
+    float: none;
     margin-left: 0;
   }
 
@@ -49,8 +49,8 @@
 
   .carbon-img > img {
     width: 100%;
-    height: auto;
     max-width: 100% !important;
+    height: auto;
     @include border-radius(var(--bs-border-radius-sm));
   }
 }
diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss
index c8b3a780f54c..cf8fe5401bb9 100644
--- a/site/src/scss/_masthead.scss
+++ b/site/src/scss/_masthead.scss
@@ -54,8 +54,8 @@
   }
 
   #carbonads { // stylelint-disable-line selector-max-id
-    margin-inline: auto;
     max-width: 400px;
+    margin-inline: auto;
   }
 
   @include media-breakpoint-up(md) {

From 27ab488b09156b2114c16dc1275fbf01e98748c6 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 29 May 2025 11:54:52 -0700
Subject: [PATCH 4/4] Home spacing

---
 site/src/scss/_masthead.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss
index cf8fe5401bb9..c1bcfbc3b48f 100644
--- a/site/src/scss/_masthead.scss
+++ b/site/src/scss/_masthead.scss
@@ -56,6 +56,7 @@
   #carbonads { // stylelint-disable-line selector-max-id
     max-width: 400px;
     margin-inline: auto;
+    margin-block: 2rem;
   }
 
   @include media-breakpoint-up(md) {