From f061004c50d09075bb820693edbb97639c5dc370 Mon Sep 17 00:00:00 2001
From: Jason Stirnaman <jstirnaman@influxdata.com>
Date: Mon, 9 Mar 2026 22:12:53 -0500
Subject: [PATCH] style(api): move Ask AI link below code block with
 theme-aware styling

Position the Ask AI link in a footer bar below the code sample instead
of overlaying it on the code block. Use site theme colors instead of
hardcoded values.
---
 assets/styles/layouts/_api-code-samples.scss | 25 ++++++++++++--------
 layouts/partials/api/code-sample.html        |  2 ++
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/assets/styles/layouts/_api-code-samples.scss b/assets/styles/layouts/_api-code-samples.scss
index 546f9a3a0..0ce7fc2f8 100644
--- a/assets/styles/layouts/_api-code-samples.scss
+++ b/assets/styles/layouts/_api-code-samples.scss
@@ -26,14 +26,9 @@
   }
 }
 
-.api-code-sample-body {
-  position: relative;
-}
-
 pre.api-code-block {
   margin: 0;
   padding: $api-spacing-md;
-  padding-bottom: $api-spacing-lg + 0.5rem;
   overflow-x: auto;
   background: #1e1e2e;
   color: #cdd6f4;
@@ -51,13 +46,23 @@ pre.api-code-block {
   }
 }
 
+.api-code-sample-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: $api-spacing-sm $api-spacing-md;
+  background: rgba(0, 0, 0, 0.03);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+
+  .dark-theme & {
+    background: rgba(255, 255, 255, 0.03);
+    border-top-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
 .api-code-ask-ai {
-  position: absolute;
-  right: $api-spacing-md;
-  bottom: $api-spacing-sm;
-  font-size: 0.8rem;
-  color: #89b4fa;
+  font-size: 0.9rem;
   text-decoration: none;
+  color: $article-link;
   opacity: 0.7;
   transition: opacity 0.2s;
 
diff --git a/layouts/partials/api/code-sample.html b/layouts/partials/api/code-sample.html
index 2b407d67d..bad575827 100644
--- a/layouts/partials/api/code-sample.html
+++ b/layouts/partials/api/code-sample.html
@@ -225,6 +225,8 @@
   <h5 class="api-code-sample-header">Example request</h5>
   <div class="api-code-sample-body">
     <pre class="api-code-block"><code class="language-sh">{{ $curlCommand }}</code></pre>
+  </div>
+  <div class="api-code-sample-footer">
     <a href="#" class="ask-ai-open api-code-ask-ai"
        data-query="{{ $aiQuery }}">
       Ask AI about this example