From c349db339a5ff6b131b7762ec735c2f755241ce9 Mon Sep 17 00:00:00 2001
From: AbhiVarde <abhivarde99@gmail.com>
Date: Sat, 11 Oct 2025 12:19:21 +0530
Subject: [PATCH] fix: resolve popover z-index stacking in settings cards

- Add optional zIndex prop to CardGrid component
- Apply z-index to Git configuration card for proper popover visibility
- Apply z-index to Global variables card for proper popover visibility
- Ensure popover menus appear above all card elements

Fixes #2464
---
 src/lib/components/cardGrid.svelte                            | 4 +++-
 .../settings/updateInstallations.svelte                       | 2 +-
 .../project-[region]-[project]/updateVariables.svelte         | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
index c9c3c0dddd..593d23e2a8 100644
--- a/src/lib/components/cardGrid.svelte
+++ b/src/lib/components/cardGrid.svelte
@@ -3,9 +3,11 @@
 
     export let hideFooter = false;
     export let gap: 'none' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' = 'l';
+    export let style = '';
+    export let zIndex: number | undefined = undefined;
 </script>
 
-<Card.Base>
+<Card.Base style="{zIndex !== undefined ? `position: relative; z-index: ${zIndex};` : ''} {style}">
     <Layout.Stack gap="xl" justifyContent="space-around">
         <Layout.GridFraction gap="xxxl" rowGap="xl" start={1} end={2}>
             <Layout.Stack gap="xxs">
diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
index 8cb2cb9f8e..51275f7539 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
@@ -77,7 +77,7 @@
     }
 </script>
 
-<CardGrid>
+<CardGrid zIndex={10}>
     <svelte:fragment slot="title">Git configuration</svelte:fragment>
     Add a Git installation to your project so you can connect repositories later through your function
     or site settings.
diff --git a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
index 86f24b136d..905a4ed297 100644
--- a/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
+++ b/src/routes/(console)/project-[region]-[project]/updateVariables.svelte
@@ -265,7 +265,7 @@
         : false;
 </script>
 
-<CardGrid>
+<CardGrid zIndex={10}>
     <svelte:fragment slot="title"
         >{isGlobal ? 'Global variables' : 'Environment variables'}</svelte:fragment>
     {#if isGlobal}