Merge pull request #23373 from cockroachdb/fix/mobile-responsive-floating-buttons

Fix floating buttons covering content on mobile/tablet

Author: mohini-crl

src/current/_includes/feedback-widget.html

@@ -546,6 +546,27 @@ <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%;
+      z-index: 1070;
+    }
+
+    #feedback-window {
+      border-radius: 12px 12px 0 0;
+    }
+  }
 </style>
 
 <!-- Script -->

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="1060"
   data-mcp-enabled="true"
   data-mcp-server-url="https://cockroachdb.mcp.kapa.ai"
   data-search-mode-enabled="true"
@@ -186,4 +186,28 @@
       max-height: calc(90vh); /* Maximum height utilization on small screens */
     }
   }
+
+  /*
+   * Shrink Kapa floating button to icon-only on mobile/tablet.
+   * !important is required here to override inline styles injected
+   * by the third-party Kapa widget script.
+   */
+  @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;
+    }
+
+    [id^="kapa-widget-container"] button svg {
+      width: 18px !important;
+      height: 18px !important;
+    }
+
+    [id^="kapa-widget-container"] button span {
+      display: none !important;
+    }
+  }
 </style>

src/current/_layouts/default.html

@@ -27,6 +27,41 @@
   {%- 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() {
+              var rateBtn = document.getElementById('sidebar-rate-page-btn');
+              if (!rateBtn) return;
+
+              rateBtn.addEventListener('click', function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                var $sidebar = $('#sidebarMenu');
+
+                function openFeedback() {
+                  var ov = document.getElementById('feedback-overlay');
+                  if (ov) {
+                    ov.style.display = 'block';
+                  }
+                }
+
+                if ($sidebar.hasClass('show')) {
+                  $sidebar.one('hidden.bs.collapse', openFeedback);
+                  $sidebar.collapse('hide');
+                } else {
+                  openFeedback();
+                }
+              });
+            });
+          </script>
         </nav>
 {% if page.toc == true %}
   {% if page.homepage != true %}