Fix floating buttons covering content on mobile/tablet

[mohini-crl]

Summary

• "Rate This Page" button: Hidden on mobile/tablet (< 992px) and moved into the Docs Menu sidebar. Clicking it closes the sidebar and opens the feedback overlay full-width from the bottom of the screen.
• "Ask AI" (Kapa) button: Shrunk to a 36x36px icon-only button on mobile/tablet so it no longer overlaps page content. Modal z-index bumped to 9999 for proper layering.
• Both features remain fully accessible on all screen sizes — just repositioned/resized to avoid covering content.

Related issue

EDUENG-104

Files changed

File	Change
src/current/_includes/feedback-widget.html	Added media query to hide floating button on mobile; feedback overlay renders full-width
src/current/_includes/head.html	Shrink Kapa button to icon-only on mobile; bump modal z-index
src/current/_layouts/default.html	Added "Rate This Page" button in sidebar for mobile; JS to close sidebar and open feedback overlay

Test plan

• Open docs site on mobile viewport (< 480px) — verify "Rate This Page" floating button is hidden and "Ask AI" is a small icon
• Open docs site on tablet viewport (< 992px) — same behavior
• Open Docs Menu on mobile — verify "Rate This Page" button appears at bottom of sidebar
• Click "Rate This Page" in sidebar — verify sidebar closes and feedback overlay opens full-width
• Click small "Ask AI" icon on mobile — verify Kapa modal opens properly
• Verify desktop (≥ 992px) is unchanged — both floating buttons appear as before

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for cockroachdb-api-docs canceled.

Name	Link
🔨 Latest commit	37b6b1a
🔍 Latest deploy log	https://app.netlify.com/projects/cockroachdb-api-docs/deploys/6a16846d9034ea0008005835

[netlify]

✅ Deploy Preview for cockroachdb-interactivetutorials-docs canceled.

Name	Link
🔨 Latest commit	37b6b1a
🔍 Latest deploy log	https://app.netlify.com/projects/cockroachdb-interactivetutorials-docs/deploys/6a16846d54d4b5000848be4c

[github-actions]

Files changed:

• src/current/_includes/feedback-widget.html
• src/current/_includes/head.html
• src/current/_layouts/default.html

[netlify]

✅ Netlify Preview

Name	Link
🔨 Latest commit	5fb1d6c
🔍 Latest deploy log	https://app.netlify.com/projects/cockroachdb-docs/deploys/6a0d89d81dbca10008abf98c
😎 Deploy Preview	https://deploy-preview-23373--cockroachdb-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Netlify Preview

Name	Link
🔨 Latest commit	37b6b1a
🔍 Latest deploy log	https://app.netlify.com/projects/cockroachdb-docs/deploys/6a16846dae444b00086be75a
😎 Deploy Preview	https://deploy-preview-23373--cockroachdb-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[ebembi-crdb]

Review of PR #23373: Fix floating buttons covering content on mobile/tablet

3 files changed, +73 / -1.

---

Issues

1. Duplicated overlay positioning — two sources of truth

The CSS media query in feedback-widget.html:552-558 sets overlay positioning (bottom, right, left, width, max-width). The JS click handler in default.html:41-50 sets the same properties as inline styles. Inline styles will always win over the CSS rule, making the media query partially dead code. If someone later updates the CSS thinking it controls the overlay appearance, nothing will change because the inline styles take precedence.

Suggestion: Remove the redundant inline style assignments from the JS and rely on the CSS media query. The JS should only need to set display: block and z-index (if the z-index truly must differ from the CSS value).

2. Magic timeout of 400ms (default.html:40)

setTimeout(function() { ... }, 400);

This assumes the Bootstrap collapse animation completes within 400ms. If the animation duration changes or the browser is under load, the overlay could appear while the sidebar is still animating, or there could be a noticeable gap.

Suggestion: Listen for Bootstrap's hidden.bs.collapse event instead:

$(sidebar).on('hidden.bs.collapse', function() {
  // open the overlay
});
$(sidebar).collapse('hide');

3. z-index escalation (1000 → 9999 → 10000)

• head.html:159: Kapa modal z-index bumped from 1000 to 9999
• default.html:49: Feedback overlay gets z-index 10000 inline

Jumping to 9999/10000 makes future layering adjustments harder. If 1000 wasn't working, it's worth understanding what was on top of it rather than leapfrogging to near-max values.

Suggestion: Audit the existing z-index values in the site and pick something that fits into the existing scale (e.g., 1050 or 1100, right above Bootstrap's modal default of 1050).

4. Mixing jQuery and vanilla JS (default.html:36-51)

The handler uses document.getElementById and document.addEventListener (vanilla JS) but then calls $(sidebar).collapse('hide') (jQuery + Bootstrap). This inconsistency is minor but worth making consistent. More importantly — is jQuery guaranteed to be loaded at this point? The <script> block that loads Bootstrap is at line 70 with defer, but this inline <script> will execute when parsed.

Suggestion: Verify that jQuery and Bootstrap JS are available when this code runs. The DOMContentLoaded listener helps, but deferred scripts may not have executed yet. Consider moving this script to the bottom of the page or wrapping it in a check.

5. Excessive !important usage (head.html:193-210)

Every declaration on the Kapa button uses !important. While this is somewhat justified since it's overriding a third-party widget's inline styles, it's worth noting that this creates a maintenance burden — any future changes will also require !important.

6. Missing border-radius reset for full-width overlay

When the feedback overlay becomes full-width at the bottom of the screen on mobile, it likely retains its desktop border-radius. A full-width bottom sheet should probably have border-radius: 0 (or only top corners rounded).

---

Minor / Nits

• Indentation in feedback-widget.html:549-561: The @media block is indented with 2 spaces, but it's a top-level rule inside the <style> tag. The surrounding CSS doesn't use that indentation level. Should align with the other rules.
• The SVG in the sidebar button (default.html:31-33) is a star icon — makes sense for "Rate This Page" but confirm it matches the existing feedback widget's iconography.

---

What looks good

• The breakpoint 991.98px correctly aligns with Bootstrap 4's lg breakpoint and the d-lg-none utility class.
• The if (ov) null check in the JS prevents errors if the feedback widget hasn't loaded.
• The approach of moving the button into the sidebar rather than removing it entirely preserves feature accessibility on mobile.
• The PR description and test plan are thorough.