From 52eb56934a3d23965f6d432545a0ba2e2e2b57ed Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Mon, 4 May 2026 12:09:50 +0530
Subject: [PATCH] Make scope descriptions toggle checkboxes

---
 .../overview/api-keys/scopes.svelte           | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/api-keys/scopes.svelte b/src/routes/(console)/project-[region]-[project]/overview/api-keys/scopes.svelte
index 045c8e7f9..1209581be 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/api-keys/scopes.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/api-keys/scopes.svelte
@@ -234,18 +234,29 @@
                                 id={scope.scope}
                                 bind:checked={activeScopes[scope.scope]} />
                             <Layout.Stack gap="xxs">
-                                <Layout.Stack inline direction="row" alignItems="center" gap="xxs">
-                                    <label for={scope.scope}>
-                                        <Typography.Text variant="m-500"
-                                            >{scope.scope}</Typography.Text>
-                                    </label>
-                                    {#if scope.deprecated}
-                                        <Badge size="xs" variant="secondary" content="Deprecated" />
-                                    {/if}
-                                </Layout.Stack>
-                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                                    {scope.description}
-                                </Typography.Text>
+                                <label for={scope.scope}>
+                                    <Layout.Stack gap="xxs">
+                                        <Layout.Stack
+                                            inline
+                                            direction="row"
+                                            alignItems="center"
+                                            gap="xxs">
+                                            <Typography.Text variant="m-500"
+                                                >{scope.scope}</Typography.Text>
+                                            {#if scope.deprecated}
+                                                <Badge
+                                                    size="xs"
+                                                    variant="secondary"
+                                                    content="Deprecated" />
+                                            {/if}
+                                        </Layout.Stack>
+                                        <Typography.Text
+                                            variant="m-400"
+                                            color="--fgcolor-neutral-tertiary">
+                                            {scope.description}
+                                        </Typography.Text>
+                                    </Layout.Stack>
+                                </label>
                             </Layout.Stack>
                         </Layout.Stack>
                     {/each}