[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