From c96f1ef2e831cd040563cac25b047ab83a719985 Mon Sep 17 00:00:00 2001
From: dhruveshmishra <dhruveshmishra09@gmail.com>
Date: Wed, 5 Aug 2026 22:50:19 +0530
Subject: [PATCH] fix: make PermissionShield tooltip placement adaptive to
 viewport (#1772)

Signed-off-by: dhruveshmishra <dhruveshmishra09@gmail.com>
---
 src/custom/permissions.tsx | 53 +++++++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/custom/permissions.tsx b/src/custom/permissions.tsx
index 2e0952c16..26f4f949e 100644
--- a/src/custom/permissions.tsx
+++ b/src/custom/permissions.tsx
@@ -72,6 +72,12 @@ export interface PermissionShieldProps {
   permissionKey: PermissionKeySpec;
   children: React.ReactNode;
   variant?: 'inline' | 'badge';
+  boundaryPadding?: {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+  };
 }
 
 /** Distinct, defined values in first-seen order — used for the metadata chips. */
@@ -93,7 +99,8 @@ const uniqueDefined = (values: (string | undefined)[]): string[] =>
 export const PermissionShield: React.FC<PermissionShieldProps> = ({
   permissionKey,
   children,
-  variant = 'inline'
+  variant = 'inline',
+  boundaryPadding
 }) => {
   const [open, setOpen] = React.useState(false);
   const [copiedKeyId, setCopiedKeyId] = React.useState<string | null>(null);
@@ -101,6 +108,9 @@ export const PermissionShield: React.FC<PermissionShieldProps> = ({
   const userContext = usePermissionUserContext();
   const unmetKeys = useUnmetPermissionKeys(permissionKey);
 
+  const defaultPadding = { top: 85, left: 270, right: 8, bottom: 8 };
+  const padding = boundaryPadding ? { ...defaultPadding, ...boundaryPadding } : defaultPadding;
+
   const handleClose = () => {
     setOpen(false);
   };
@@ -419,24 +429,29 @@ export const PermissionShield: React.FC<PermissionShieldProps> = ({
           disableTouchListener
           slotProps={{
             popper: {
-              modifiers: [
-                {
-                  name: 'flip',
-                  enabled: true,
-                  options: {
-                    fallbackPlacements: ['bottom', 'right', 'left']
-                  }
-                },
-                {
-                  name: 'preventOverflow',
-                  enabled: true,
-                  options: {
-                    boundary: 'viewport',
-                    altAxis: true,
-                    padding: 8
+              popperOptions: {
+                modifiers: [
+                  {
+                    name: 'flip',
+                    enabled: true,
+                    options: {
+                      boundary: 'viewport',
+                      fallbackPlacements: ['right', 'bottom', 'left'],
+                      padding
+                    }
+                  },
+                  {
+                    name: 'preventOverflow',
+                    enabled: true,
+                    options: {
+                      boundary: 'viewport',
+                      tether: false,
+                      altAxis: true,
+                      padding
+                    }
                   }
-                }
-              ]
+                ]
+              }
             },
             tooltip: {
               sx: {
@@ -444,6 +459,8 @@ export const PermissionShield: React.FC<PermissionShieldProps> = ({
                 color: '#FFFFFF',
                 maxWidth: 360,
                 minWidth: 300,
+                maxHeight: '320px',
+                overflowY: 'auto',
                 padding: '12px',
                 borderLeft: '4px solid #EBC024',
                 borderRadius: '8px',