From a1ae64e9dfd06f721563c4fe53980df82de58690 Mon Sep 17 00:00:00 2001
From: Paluvadi Dinesh Manideep <dineshmanideep@gmail.com>
Date: Fri, 7 Aug 2026 17:29:30 +0530
Subject: [PATCH] Fix floating Kanvas card overlapping navbar on low-height
 screens

Signed-off-by: Paluvadi Dinesh Manideep <dineshmanideep@gmail.com>
---
 assets/scss/_kanvas-corner-popup.scss | 35 ++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/assets/scss/_kanvas-corner-popup.scss b/assets/scss/_kanvas-corner-popup.scss
index c86a2a33634..a3055dde332 100644
--- a/assets/scss/_kanvas-corner-popup.scss
+++ b/assets/scss/_kanvas-corner-popup.scss
@@ -13,11 +13,17 @@
 }
 
 .kanvas-corner-popup .popup {
+  --kanvas-top-gap:1rem;
+  --kanvas-bottom-gap: 3rem;
+  --kanvas-navbar-height: 6rem;
   position: fixed;
   bottom: 0;
   right: 0;
-  margin: 0 2rem 3rem;
+  margin: 0 2rem var(--kanvas-bottom-gap);
   width: 26rem;
+  max-width: calc(100vw - 4rem);
+  box-sizing: border-box;
+  overflow: visible;
   z-index: 9999;
   display: flex;
   justify-content: center;
@@ -25,6 +31,18 @@
   transform: translateY(12px);
   transition: opacity 0.35s ease, transform 0.35s ease;
 
+  @media (max-height: 700px) {
+    --kanvas-bottom-gap: 1rem;
+  }
+
+  @media (max-height: 450px) {
+    --kanvas-bottom-gap: 0.5rem;
+  }
+
+  @media (max-width: 767.98px) {
+    --kanvas-navbar-height: 9rem;
+  }
+
   @media (max-width: 1000px) {
     max-width: 22rem;
   }
@@ -48,7 +66,14 @@
 
 .kanvas-corner-popup .popup-inner {
   position: relative;
+  min-height: 0;
   width: 100%;
+  max-height: calc(100vh - var(--kanvas-navbar-height) - var(--kanvas-bottom-gap) - var(--kanvas-top-gap));
+  max-height: calc(100dvh - var(--kanvas-navbar-height) - var(--kanvas-bottom-gap) - var(--kanvas-top-gap));
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  box-sizing: border-box;
   background: #121212;
   display: flex;
   flex-direction: column;
@@ -59,6 +84,10 @@
   border-radius: 5%;
   box-shadow: 0 0 28px rgba($secondary, 0.55);
 
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
   @media (max-width: 640px) {
     padding: 0.8rem;
     gap: 0.375rem;
@@ -104,6 +133,8 @@
   text-decoration: none;
   color: inherit;
   width: 100%;
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
 
 .kanvas-corner-popup .popup-text {
@@ -152,6 +183,8 @@
   font-size: 0.95rem;
   border-radius: 4px;
   text-decoration: none;
+  width: auto;
+  max-width: 100%;
   transition: filter 0.2s ease, box-shadow 0.2s ease;
 
   &:hover {