[Docs] Fix floating Kanvas card overlapping navbar (#1187)

[dineshmanideep]

This PR fixes the issue where the floating Kanvas card overlaps the navbar on low-height or landscape viewports.

Changes

• Adjusted the floating Kanvas card positioning for low-height screens.
• Prevented the card from overlapping the navbar.
• Preserved the existing behavior on normal-sized screens.

Fixes #1187

Signed commits

• Yes, I signed my commits.

Demo

Screencast.From.2026-08-07.17-09-27.mp4

Summary by CodeRabbit

• Style
  • Improved popup responsiveness across different screen heights and mobile widths.
  • Added configurable spacing and navigation height settings.
  • Constrained popup dimensions and enabled scrolling for lengthy content.
  • Prevented links and buttons from overflowing on narrow screens.
  • Hid scrollbars for a cleaner appearance.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Kanvas corner popup now uses viewport-aware spacing and dimensions. Its inner content scrolls within bounded heights. Links and buttons prevent horizontal overflow on narrow layouts.

Changes

Kanvas popup layout

Layer / File(s)	Summary
Responsive popup sizing and overflow handling assets/scss/_kanvas-corner-popup.scss	The popup uses configurable spacing, navbar-height adjustments, viewport-aware sizing, bounded scrolling, hidden scrollbars, wrapped links, and width-constrained buttons.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: rudra2637

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the fix for the floating Kanvas card overlapping the navbar.
Linked Issues check	✅ Passed	The CSS changes address responsive width and height behavior and prevent the floating card from overlapping the navbar [#1187].
Out of Scope Changes check	✅ Passed	The changes are limited to popup layout, responsiveness, scrolling, and overflow behavior required by the linked issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@assets/scss/_kanvas-corner-popup.scss`:
- Around line 16-19: In the custom property block, add an empty line after
--kanvas-navbar-height and before the position declaration to satisfy
Stylelint’s declaration-empty-line-before rule.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 510c8874-452c-46fd-8279-6757aebff06b

📥 Commits

Reviewing files that changed from the base of the PR and between e907eea and a1ae64e.

📒 Files selected for processing (1)

• assets/scss/_kanvas-corner-popup.scss

[coderabbitai]

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Fix the Stylelint error before merge.

Add an empty line between the custom property declarations and position. Stylelint reports declaration-empty-line-before on Line 19.

🧰 Tools

🪛 Stylelint (17.14.0)

[error] 19-19: Expected empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@assets/scss/_kanvas-corner-popup.scss` around lines 16 - 19, In the custom
property block, add an empty line after --kanvas-navbar-height and before the
position declaration to satisfy Stylelint’s declaration-empty-line-before rule.

Source: Linters/SAST tools

[Sbragul26]

@dineshmanideep, please address the CodeRabbit comment.

[Sbragul26]

The card is responsive in landscape, but in portrait view it still looks misaligned and gets cut off. Please check the vertical positioning and height responsiveness.

[dineshmanideep]

hello @Sbragul26 , I have tried to replicate the issue on my side but i am not able to ,
so could you specify in a little more detail it would be very helpful for me

[jijillery]

Muse Code review: This is a valid fix direction for #1187 — the floating Kanvas card currently only adapts to viewport width, and the added height-aware sizing addresses the navbar overlap on low-height/landscape screens. I verified the touched file still matches the PR base on master, the PR is mergeable (CLEAN), checks pass (triage, CodeRabbit, DCO), and #1187 is still open. Findings below, ordered by importance.

1. Close button will scroll out of view (main issue) — assets/scss/_kanvas-corner-popup.scss, .popup-inner / .close-btn

.popup-inner becomes overflow-y: auto while .close-btn stays position: absolute inside it, so on exactly the short viewports this PR targets, the close button scrolls away with the content. Consider making it sticky so it stays visible:

.kanvas-corner-popup .close-btn {
  position: sticky;
  top: 0.5rem;
  margin-left: auto;
  align-self: flex-end;
  z-index: 1;
}

Alternatively, move the scroll boundary to an inner wrapper so the button stays outside the scroll container. Either way, please verify at ~400px viewport height that the button remains reachable.

2. Hidden scrollbars hurt discoverability — .popup-inner (scrollbar-width: none + ::-webkit-scrollbar { display: none; })

A scrollable region with no visible scrollbar gives mouse/keyboard users no affordance that more content exists. Since scrolling only happens on short viewports, consider keeping the default (or scrollbar-width: thin) instead of hiding them, or at minimum ensure the scrollable region is keyboard-reachable. Also note border-radius: 5% on a variable-height scroll container will look inconsistent across heights — a fixed rem radius would be more stable.

3. Magic navbar-height numbers — --kanvas-navbar-height: 6rem (desktop) / 9rem (max-width: 767.98px)

I found no matching navbar-height variable in assets/scss/, so these are hardcoded guesses that will silently break if the navbar changes. Please add a brief comment stating where the values come from (measured against which navbar breakpoint), e.g.:

// Measured against the docs navbar height (mobile nav wraps taller below ~768px).
--kanvas-navbar-height: 6rem;

4. Minor: overflow-wrap: anywhere — .popup-content-link

anywhere allows breaks even when unnecessary and affects min-content sizing; break-word is usually the safer choice for link text:

overflow-wrap: break-word;

5. Nits

• --kanvas-top-gap:1rem; is missing a space after the colon (other declarations have one).
• width: auto on .explore-playground-button is the default for inline-block and looks redundant — drop it unless it overrides something specific.
• The doubled max-height (100vh then 100dvh) is correct progressive enhancement (older browsers drop the unknown-unit line), but a one-line comment would save future readers the confusion.

No blocking concerns beyond item 1; with the close-button fix and a quick check at 360–450px viewport heights, this looks good to merge.