fix: spacing issues added as props in droplist

Author: HarshMN2345

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>

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>