From 5fb1d6cf7f49f2a9b54114d3054e73792ff26095 Mon Sep 17 00:00:00 2001
From: Mohini <mohini.pandey@cockroachlabs.com>
Date: Wed, 20 May 2026 15:45:06 +0530
Subject: [PATCH] Fix floating buttons covering content on mobile/tablet views

The "Rate This Page" and "Ask AI" floating buttons were overlapping and
hiding page content on mobile and tablet viewports. This fix:

- Hides the floating "Rate This Page" button on viewports < 992px and
  moves it into the Docs Menu sidebar as a full-width button that closes
  the sidebar and opens the feedback overlay full-width from the bottom
- Shrinks the Kapa "Ask AI" floating button to a 36x36px icon-only
  button on mobile/tablet so it no longer covers content
- Bumps Kapa modal z-index to 9999 to ensure it renders above all
  page elements on mobile

Resolves: EDUENG-104

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/current/_includes/feedback-widget.html | 16 +++++++++++
 src/current/_includes/head.html            | 25 +++++++++++++++-
 src/current/_layouts/default.html          | 33 ++++++++++++++++++++++
 3 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/src/current/_includes/feedback-widget.html b/src/current/_includes/feedback-widget.html
index 369ab75d696..c952160c6b7 100644
--- a/src/current/_includes/feedback-widget.html
+++ b/src/current/_includes/feedback-widget.html
@@ -546,6 +546,22 @@ <h4>Explore More Documentation:</h4>
   margin-top: 4px;
   line-height: 1.4;
 }
+
+  /* Hide floating feedback button on mobile/tablet — accessible via sidebar instead */
+  @media (max-width: 991.98px) {
+    #sticky-rating-btn {
+      display: none;
+    }
+
+    /* When feedback overlay is opened via sidebar button on mobile, make it full-width */
+    #feedback-overlay {
+      bottom: 0;
+      right: 0;
+      left: 0;
+      width: 100%;
+      max-width: 100%;
+    }
+  }
 </style>
 
 <!-- Script -->
diff --git a/src/current/_includes/head.html b/src/current/_includes/head.html
index 93e6f87570e..f18fb47fb82 100755
--- a/src/current/_includes/head.html
+++ b/src/current/_includes/head.html
@@ -156,7 +156,7 @@
   data-modal-title="CockroachDB AI"
   data-modal-disclaimer="This AI bot is experimental. Don't rely on it for production workloads. Always consult the official CockroachDB documentation. Interactions with this AI bot may be monitored or recorded, and your use of the AI bot is subject to the Cockroach Labs' [Terms of Use](https://www.cockroachlabs.com/website-terms-of-use/) and [Privacy policy](https://www.cockroachlabs.com/privacy/)."
   data-modal-y-offset="12vh"
-  data-modal-z-index="1000"
+  data-modal-z-index="9999"
   data-mcp-enabled="true"
   data-mcp-server-url="https://cockroachdb.mcp.kapa.ai"
   data-search-mode-enabled="true"
@@ -186,4 +186,27 @@
       max-height: calc(90vh); /* Maximum height utilization on small screens */
     }
   }
+
+  /* Make Kapa floating button smaller and icon-only on mobile/tablet */
+  @media (max-width: 991.98px) {
+    [id^="kapa-widget-container"] button {
+      width: 36px !important;
+      height: 36px !important;
+      min-width: 36px !important;
+      padding: 0 !important;
+      font-size: 0 !important;
+      bottom: 12px !important;
+      right: 8px !important;
+    }
+
+    [id^="kapa-widget-container"] button svg {
+      width: 18px !important;
+      height: 18px !important;
+    }
+
+    /* Hide button text, keep icon */
+    [id^="kapa-widget-container"] button span {
+      display: none !important;
+    }
+  }
 </style>
diff --git a/src/current/_layouts/default.html b/src/current/_layouts/default.html
index 997daac6a67..28dcedda3cf 100755
--- a/src/current/_layouts/default.html
+++ b/src/current/_layouts/default.html
@@ -27,6 +27,39 @@
   {%- assign sidebar_class = "nav--search " -%}
 {%- endif -%}
 {% include_cached sidebar.html sidebar_class=sidebar_class %}
+          <!-- Mobile-only action buttons: Ask AI & Rate This Page -->
+          <div class="sidebar-mobile-actions d-lg-none border-top mt-2 pt-2 px-3 pb-3">
+            <button type="button" class="btn btn-sm btn-outline-secondary w-100" id="sidebar-rate-page-btn">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 16 16" class="mr-1" style="vertical-align: -2px;">
+                <path fill="currentColor" d="M7.538 1.11a.5.5 0 0 1 .924 0l1.537 3.696a.5.5 0 0 0 .421.306l3.99.32a.5.5 0 0 1 .285.878l-3.04 2.604a.5.5 0 0 0-.16.496l.928 3.893a.5.5 0 0 1-.747.542L8.261 11.76a.5.5 0 0 0-.522 0l-3.415 2.086a.5.5 0 0 1-.747-.542l.928-3.893a.5.5 0 0 0-.16-.496L1.304 6.31a.5.5 0 0 1 .285-.878l3.99-.32A.5.5 0 0 0 6 4.806L7.538 1.11Z"></path>
+              </svg> Rate This Page
+            </button>
+          </div>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              document.getElementById('sidebar-rate-page-btn').addEventListener('click', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                var sidebar = document.getElementById('sidebarMenu');
+                if (sidebar && sidebar.classList.contains('show')) {
+                  $(sidebar).collapse('hide');
+                }
+                setTimeout(function() {
+                  var ov = document.getElementById('feedback-overlay');
+                  if (ov) {
+                    ov.style.display = 'block';
+                    ov.style.position = 'fixed';
+                    ov.style.bottom = '0';
+                    ov.style.left = '0';
+                    ov.style.right = '0';
+                    ov.style.width = '100%';
+                    ov.style.maxWidth = '100%';
+                    ov.style.zIndex = '10000';
+                  }
+                }, 400);
+              });
+            });
+          </script>
         </nav>
 {% if page.toc == true %}
   {% if page.homepage != true %}