From c6351a2d64bb10f4e4b7b45caaa39ad0c937260e Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 19 Aug 2025 18:07:22 +0530
Subject: [PATCH] fix: spacing issues added as props in droplist

---
 src/lib/components/dropList.svelte               | 14 ++++++++++++--
 .../backups/containerHeader.svelte               | 16 ++++------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/dropList.svelte b/src/lib/components/dropList.svelte
index 1b6d3edb7..4ef0542e1 100644
--- a/src/lib/components/dropList.svelte
+++ b/src/lib/components/dropList.svelte
@@ -14,6 +14,10 @@
     export let wrapperFullWidth = false;
     export let position: 'relative' | 'static' = 'relative';
     export let noMaxWidthList = false;
+    export let paddingBlock: string = undefined;
+    export let paddingInline: string = undefined;
+    export let resetListPadding: boolean = false;
+    export let gap: string = undefined;
     let classes: string = '';
     export { classes as class };
 </script>
@@ -34,14 +38,20 @@
             class="drop is-no-arrow {classes}"
             class:u-max-width-100-percent={fullWidth}
             style:--drop-width-size-desktop={width ? `${width}rem` : ''}
+            style:margin-block-start={gap}
             style:position>
             {#if $$slots.list}
                 <section
                     class:u-overflow-y-auto={scrollable}
                     class:u-max-height-200={scrollable}
                     class="drop-section"
-                    style={noMaxWidthList ? 'max-inline-size: 100%' : ''}>
-                    <ul class="drop-list">
+                    style={noMaxWidthList ? 'max-inline-size: 100%' : ''}
+                    style:padding-block={paddingBlock}
+                    style:padding-inline={paddingInline}>
+                    <ul
+                        class="drop-list"
+                        style:padding={resetListPadding ? '0' : undefined}
+                        style:margin={resetListPadding ? '0' : undefined}>
                         <slot name="list" />
                     </ul>
                 </section>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
index 2e908e6da..d340d0f75 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
@@ -46,7 +46,10 @@
                     width="16"
                     noArrow
                     placement="bottom-start"
-                    class="gap-popover policies-popover">
+                    gap="6px"
+                    paddingBlock="var(--space-5, 12px)"
+                    paddingInline="var(--space-6, 16px)"
+                    resetListPadding>
                     {#if $organization?.billingPlan === BillingPlan.PRO}
                         <Tag
                             size="s"
@@ -99,15 +102,4 @@
     .is-disabled {
         opacity: 0.5;
     }
-    :global(.drop.gap-popover) {
-        margin-block-start: 6px;
-    }
-    :global(.drop.policies-popover .drop-section) {
-        padding-block: var(--space-5, 12px);
-        padding-inline: var(--space-6, 16px);
-    }
-    :global(.drop.policies-popover .drop-list) {
-        padding: 0;
-        margin: 0;
-    }
 </style>