From 958ebeae61f8037dbc1d0494245be71e8606d347 Mon Sep 17 00:00:00 2001
From: Shubham Shah <52590791+SavvyShah@users.noreply.github.com>
Date: Thu, 21 Jul 2022 18:04:49 +0530
Subject: [PATCH] feat: make context menu scrollable (#4030)

* Make context menu scrollable

* Fix color picker not showing up

* Fix overflow cuts shadow

* style fixes

* fix

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
---
 src/components/Popover.scss |  1 +
 src/components/Popover.tsx  | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Popover.scss b/src/components/Popover.scss
index 594d44e2..84d16e47 100644
--- a/src/components/Popover.scss
+++ b/src/components/Popover.scss
@@ -2,5 +2,6 @@
   .popover {
     position: absolute;
     z-index: 10;
+    padding: 5px 0 5px;
   }
 }
diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
index ba424f3a..630fee1c 100644
--- a/src/components/Popover.tsx
+++ b/src/components/Popover.tsx
@@ -69,12 +69,27 @@ export const Popover = ({
     if (fitInViewport && popoverRef.current) {
       const element = popoverRef.current;
       const { x, y, width, height } = element.getBoundingClientRect();
+      const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;
+
+      //Position correctly when clicked on rightmost part or the bottom part of viewport
       if (x + width - offsetLeft > viewportWidth) {
-        element.style.left = `${viewportWidth - width}px`;
+        element.style.left = `${viewportWidth - width - 10}px`;
       }
       if (y + height - offsetTop > viewportHeight) {
         element.style.top = `${viewportHeight - height}px`;
       }
+
+      //Resize to fit viewport on smaller screens
+      if (height >= viewportHeight) {
+        element.style.height = `${viewportHeight - 20}px`;
+        element.style.top = "10px";
+        element.style.overflowY = "scroll";
+      }
+      if (width >= viewportWidth) {
+        element.style.width = `${viewportWidth}px`;
+        element.style.left = "0px";
+        element.style.overflowX = "scroll";
+      }
     }
   }, [fitInViewport, viewportWidth, viewportHeight, offsetLeft, offsetTop]);