From f53897f7791201b271d4f5b3afe04cde7de08b6a Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Thu, 1 Aug 2024 14:55:22 +0530
Subject: [PATCH] fix: component borders for CLI modal.

---
 src/lib/components/code.svelte                  |  5 ++++-
 .../function-[function]/createCli.svelte        | 17 ++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 5a358d548..47c134f20 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -32,6 +32,9 @@
     export let noBoxPadding = false;
     export let allowScroll = false;
 
+    let classes = '';
+    export { classes as class };
+
     Prism.plugins.customClass.prefix('prism-');
 
     afterUpdate(async () => {
@@ -39,7 +42,7 @@
     });
 </script>
 
-<section class="box u-overflow-hidden" class:common-section={!noMargin} class:noBoxPadding>
+<section class="box u-overflow-hidden {classes}" class:common-section={!noMargin} class:noBoxPadding>
     <div
         class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
index efc7a48c7..b43c2d9bd 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
@@ -98,7 +98,7 @@
         >.
     </Alert>
 
-    <div class="editor-border">
+    <div class="editor-border box">
         <SecondaryTabs large class="u-sep-block-end u-padding-8">
             {#each ['Unix', 'CMD', 'PowerShell'] as cat}
                 <SecondaryTabsItem
@@ -118,6 +118,7 @@
                     withLineNumbers
                     withCopy
                     language="sh"
+                    class="cli-commands-code-box-no-outline"
                     label={codeSnippets[cat].language}
                     code={codeSnippets[cat].code} />
             {/if}
@@ -127,3 +128,17 @@
         <Button secondary on:click={() => (show = false)}>Close</Button>
     </svelte:fragment>
 </Modal>
+
+<style>
+    .box {
+        padding: unset !important;
+    }
+
+    /* should we use global here? */
+    .editor-border :global(.cli-commands-code-box-no-outline) {
+        margin: 1rem 0;
+        border: unset !important;
+        border-radius: unset!important;
+        padding: 0 var(--box-padding, 1.5rem ) 0 var(--box-padding, 1.5rem );
+    }
+</style>
\ No newline at end of file