From ce6fdc5a6aaec5d9fa5d2c1f95016decbb0ea3f6 Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Mon, 4 May 2026 11:20:38 +0530
Subject: [PATCH] Align deprecated badge with scope name

---
 .../overview/api-keys/scopes.svelte           | 37 +++++++++++++++----
 1 file changed, 30 insertions(+), 7 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 826a37324..045c8e7f9 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
@@ -37,7 +37,15 @@
         type ScopeDefinition
     } from '$lib/constants';
     import { sdk } from '$lib/stores/sdk';
-    import { Accordion, Alert, Badge, Divider, Layout, Selector } from '@appwrite.io/pink-svelte';
+    import {
+        Accordion,
+        Alert,
+        Badge,
+        Divider,
+        Layout,
+        Selector,
+        Typography
+    } from '@appwrite.io/pink-svelte';
     import type { Scopes } from '@appwrite.io/console';
 
     let { scopes = $bindable([]) }: { scopes: Scopes[] } = $props();
@@ -220,16 +228,25 @@
                 on:change={(event) => onCategoryChange(event, category)}>
                 <Layout.Stack>
                     {#each filteredScopes.filter((s) => s.category === category) as scope}
-                        <Layout.Stack inline direction="row" alignItems="center" gap="xxs">
+                        <Layout.Stack inline direction="row" alignItems="flex-start" gap="s">
                             <Selector.Checkbox
                                 size="s"
                                 id={scope.scope}
-                                label={scope.scope}
-                                description={scope.description}
                                 bind:checked={activeScopes[scope.scope]} />
-                            {#if scope.deprecated}
-                                <Badge size="xs" variant="secondary" content="Deprecated" />
-                            {/if}
+                            <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>
+                            </Layout.Stack>
                         </Layout.Stack>
                     {/each}
                 </Layout.Stack>
@@ -237,3 +254,9 @@
         {/each}
     </Layout.Stack>
 </Layout.Stack>
+
+<style>
+    label {
+        cursor: pointer;
+    }
+</style>