From 912ae3222619f741749705e149ef78d0c7c52448 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 18 Aug 2025 17:09:29 +0530
Subject: [PATCH 1/2] feat(console): disable actions by role and show tooltip
 instead of hiding

---
 .../organization-[organization]/+page.svelte  |  7 +-
 .../databases/+page.svelte                    |  9 ++-
 .../database-[database]/+page.svelte          | 12 ++-
 .../collection-[collection]/+page.svelte      | 13 ++-
 .../attributes/+page.svelte                   | 23 ++++--
 .../indexes/+page.svelte                      | 19 +++--
 .../(components)/createActionMenu.svelte      |  9 ++-
 .../function-[function]/+page.svelte          | 19 +++--
 .../functions/templates/+page.svelte          | 27 ++++---
 .../template-[template]/+page.svelte          | 19 ++---
 .../messaging/+page.svelte                    | 26 ++++--
 .../messaging/providers/+page.svelte          | 23 ++++--
 .../messaging/topics/+page.svelte             | 10 ++-
 .../overview/api-keys/action.svelte           | 10 ++-
 .../overview/dev-keys/action.svelte           | 51 ++++++------
 .../overview/platforms/+page.svelte           | 10 ++-
 .../overview/platforms/action.svelte          | 79 +++++++++----------
 .../settings/updateName.svelte                | 40 +++++-----
 .../settings/webhooks/+page.svelte            | 10 ++-
 .../sites/+page.svelte                        | 13 ++-
 .../storage/+page.svelte                      | 13 ++-
 21 files changed, 263 insertions(+), 179 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/+page.svelte b/src/routes/(console)/organization-[organization]/+page.svelte
index 567e996594..a982e71dfe 100644
--- a/src/routes/(console)/organization-[organization]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/+page.svelte
@@ -147,15 +147,16 @@
         <Typography.Title>Projects</Typography.Title>
 
         <DropList bind:show={showDropdown} placement="bottom-end">
-            {#if $canWriteProjects}
+            <Tooltip disabled={$canWriteProjects}>
                 <Button
                     on:click={handleCreateProject}
                     event="create_project"
-                    disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}>
+                    disabled={($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteProjects}>
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create project
                 </Button>
-            {/if}
+                <div slot="tooltip">Your role does not allow this action</div>
+            </Tooltip>
             <svelte:fragment slot="list">
                 <DropListItem on:click={() => (showCreate = true)}>Empty project</DropListItem>
                 <DropListItem on:click={importProject}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
index df3e783aaa..56fccf0c61 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
@@ -14,7 +14,7 @@
     import Table from './table.svelte';
     import { registerCommands } from '$lib/commandCenter';
     import { canWriteDatabases } from '$lib/stores/roles';
-    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Tooltip } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import EmptySearch from '$lib/components/emptySearch.svelte';
 
@@ -57,15 +57,16 @@
                 view={data.view}
                 hideColumns={!data.databases.total}
                 hideView={!data.databases.total} />
-            {#if $canWriteDatabases}
+            <Tooltip disabled={$canWriteDatabases}>
                 <Button
                     on:click={() => (showCreate = true)}
                     event="create_database"
-                    disabled={isCreationDisabled}>
+                    disabled={isCreationDisabled || !$canWriteDatabases}>
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create database
                 </Button>
-            {/if}
+                <div slot="tooltip">Your role does not allow this action</div>
+            </Tooltip>
         </Layout.Stack>
     </Layout.Stack>
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
index 989916cf9a..4668c7dea2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
@@ -7,7 +7,7 @@
     import Grid from './grid.svelte';
     import type { PageData } from './$types';
     import { canWriteCollections } from '$lib/stores/roles';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
@@ -19,12 +19,16 @@
         {columns}
         hasSearch
         searchPlaceholder="Search by name or ID">
-        {#if $canWriteCollections}
-            <Button on:click={() => ($showCreate = true)} event="create_collection">
+        <Tooltip disabled={$canWriteCollections}>
+            <Button
+                on:click={() => ($showCreate = true)}
+                event="create_collection"
+                disabled={!$canWriteCollections}>
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Create collection
             </Button>
-        {/if}
+            <div slot="tooltip">Your role does not allow this action</div>
+        </Tooltip>
     </ResponsiveContainerHeader>
 
     {#if data.collections.total}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 15a3506502..a5126f8ea6 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -7,7 +7,7 @@
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
-    import { Card, Icon, Layout, Empty as PinkEmpty } from '@appwrite.io/pink-svelte';
+    import { Card, Icon, Layout, Empty as PinkEmpty, Tooltip } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
@@ -196,16 +196,21 @@
                             text
                             event="empty_documentation"
                             size="s">Documentation</Button>
-                        {#if $canWriteCollections}
+                        <Tooltip disabled={$canWriteCollections}>
                             <CreateAttributeDropdown
                                 bind:selectedOption={selectedAttribute}
                                 bind:showCreate={showCreateAttribute}
                                 let:toggle>
-                                <Button secondary event="create_attribute" on:click={toggle}>
+                                <Button
+                                    secondary
+                                    event="create_attribute"
+                                    on:click={toggle}
+                                    disabled={!$canWriteCollections}>
                                     Create attribute
                                 </Button>
                             </CreateAttributeDropdown>
-                        {/if}
+                            <div slot="tooltip">Your role does not allow this action</div>
+                        </Tooltip>
                     </slot>
                 </PinkEmpty>
             </Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index e94163b7b7..c52186183c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -77,9 +77,15 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Typography.Title>Attributes</Typography.Title>
-        {#if $canWriteCollections}
-            <CreateAttributeDropdown bind:selectedOption bind:showCreate />
-        {/if}
+        <Tooltip disabled={$canWriteCollections}>
+            <CreateAttributeDropdown bind:selectedOption bind:showCreate>
+                <Button event="create_attribute" disabled={!$canWriteCollections}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create attribute
+                </Button>
+            </CreateAttributeDropdown>
+            <div slot="tooltip">Your role does not allow this action</div>
+        </Tooltip>
     </Layout.Stack>
 
     {#if $attributes.length}
@@ -236,13 +242,18 @@
                     text
                     event="empty_documentation"
                     ariaLabel={`create {target}`}>Documentation</Button>
-                {#if $canWriteCollections}
+                <Tooltip disabled={$canWriteCollections}>
                     <CreateAttributeDropdown bind:selectedOption bind:showCreate let:toggle>
-                        <Button secondary event="create_attribute" on:click={toggle}>
+                        <Button
+                            secondary
+                            event="create_attribute"
+                            on:click={toggle}
+                            disabled={!$canWriteCollections}>
                             Create attribute
                         </Button>
                     </CreateAttributeDropdown>
-                {/if}
+                    <div slot="tooltip">Your role does not allow this action</div>
+                </Tooltip>
             </svelte:fragment>
         </Empty>
     {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index f9258a35bc..0162a14e41 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -20,6 +20,7 @@
         Link,
         Popover,
         Table,
+        Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
     import {
@@ -59,15 +60,16 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Typography.Title>Indexes</Typography.Title>
-        {#if $canWriteCollections}
+        <Tooltip disabled={$canWriteCollections}>
             <Button
                 event="create_index"
-                disabled={!$collection?.attributes?.length}
+                disabled={!$collection?.attributes?.length || !$canWriteCollections}
                 on:click={() => (showCreateIndex = true)}>
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Create index
             </Button>
-        {/if}
+            <div slot="tooltip">Your role does not allow this action</div>
+        </Tooltip>
     </Layout.Stack>
 
     {#if data.collection?.attributes?.length}
@@ -165,16 +167,21 @@
                     text
                     event="empty_documentation"
                     ariaLabel={`create {target}`}>Documentation</Button>
-                {#if $canWriteCollections}
+                <Tooltip disabled={$canWriteCollections}>
                     <CreateAttributeDropdown
                         bind:selectedOption={selectedAttribute}
                         bind:showCreate={showCreateAttribute}
                         let:toggle>
-                        <Button secondary event="create_attribute" on:click={toggle}>
+                        <Button
+                            secondary
+                            event="create_attribute"
+                            on:click={toggle}
+                            disabled={!$canWriteCollections}>
                             Create attribute
                         </Button>
                     </CreateAttributeDropdown>
-                {/if}
+                    <div slot="tooltip">Your role does not allow this action</div>
+                </Tooltip>
             </svelte:fragment>
         </Empty>
     {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/createActionMenu.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/createActionMenu.svelte
index 5f9e684f4b..b5f81c5beb 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/createActionMenu.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/createActionMenu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { beforeNavigate } from '$app/navigation';
     import { canWriteFunctions } from '$lib/stores/roles';
-    import { ActionMenu, Popover } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Popover, Tooltip } from '@appwrite.io/pink-svelte';
     import CreateCli from '../(modals)/createCli.svelte';
     import CreateGit from '../(modals)/createGit.svelte';
     import CreateManual from '../(modals)/createManual.svelte';
@@ -17,9 +17,10 @@
 </script>
 
 <Popover let:toggle placement="bottom-end" padding="none">
-    {#if $canWriteFunctions}
-        <slot {toggle} />
-    {/if}
+    <Tooltip disabled={$canWriteFunctions}>
+        <slot {toggle} disabled={!$canWriteFunctions} />
+        <div slot="tooltip">Your role does not allow this action</div>
+    </Tooltip>
     <svelte:fragment slot="tooltip" let:toggle>
         <ActionMenu.Root>
             <ActionMenu.Item.Button
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte
index ed9a8cc36f..b109bf1072 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte
@@ -57,8 +57,8 @@
                         text
                         event="empty_documentation"
                         ariaLabel={`create deployment`}>Documentation</Button>
-                    <CreateActionMenu let:toggle installations={data.installations}>
-                        <Button secondary on:click={toggle} event="create_deployment">
+                    <CreateActionMenu let:toggle let:disabled installations={data.installations}>
+                        <Button secondary on:click={toggle} event="create_deployment" {disabled}>
                             Create deployment
                         </Button>
                     </CreateActionMenu>
@@ -192,8 +192,15 @@
                                 text
                                 event="empty_documentation"
                                 ariaLabel={`create deployment`}>Documentation</Button>
-                            <CreateActionMenu let:toggle installations={data.installations}>
-                                <Button secondary on:click={toggle} event="create_deployment">
+                            <CreateActionMenu
+                                let:toggle
+                                let:disabled
+                                installations={data.installations}>
+                                <Button
+                                    secondary
+                                    on:click={toggle}
+                                    event="create_deployment"
+                                    {disabled}>
                                     Create deployment
                                 </Button>
                             </CreateActionMenu>
@@ -208,8 +215,8 @@
                     {columns}
                     hideView
                     analyticsSource="function_deployments">
-                    <CreateActionMenu let:toggle installations={data.installations}>
-                        <Button on:click={toggle} event="create_deployment">
+                    <CreateActionMenu let:toggle let:disabled installations={data.installations}>
+                        <Button on:click={toggle} event="create_deployment" {disabled}>
                             <Icon icon={IconPlus} size="s" slot="start" />
                             Create deployment
                         </Button>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte
index de53032daf..fcc9d09028 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte
@@ -214,19 +214,20 @@
                                                     text>
                                                     <span class="text">Details</span>
                                                 </Button>
-                                                {#if $canWriteFunctions}
-                                                    <ContainerButton
-                                                        title="functions"
-                                                        disabled={buttonDisabled}
-                                                        buttonType="secondary"
-                                                        buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${template.id}`}
-                                                        showIcon={false}
-                                                        buttonText="Create"
-                                                        buttonEventData={{
-                                                            source: 'functions_template'
-                                                        }}
-                                                        buttonEvent="create_function" />
-                                                {/if}
+                                                <ContainerButton
+                                                    title="functions"
+                                                    disabled={buttonDisabled || !$canWriteFunctions}
+                                                    buttonType="secondary"
+                                                    buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${template.id}`}
+                                                    showIcon={false}
+                                                    buttonText="Create"
+                                                    buttonEventData={{
+                                                        source: 'functions_template'
+                                                    }}
+                                                    buttonEvent="create_function"
+                                                    tooltipContent={!$canWriteFunctions
+                                                        ? 'Your role does not allow this action'
+                                                        : undefined} />
                                             </Layout.Stack>
                                         </Layout.Stack>
                                     </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte
index 4f5ca68a10..0767342cd4 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/templates/template-[template]/+page.svelte
@@ -88,15 +88,16 @@
                         View source
                         <Icon icon={IconExternalLink} size="s" slot="end" />
                     </Button>
-                    {#if $canWriteFunctions}
-                        <ContainerButton
-                            title="functions"
-                            disabled={buttonDisabled}
-                            buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${$template.id}`}
-                            showIcon={false}
-                            buttonText="Create function"
-                            buttonEvent="create_function" />
-                    {/if}
+                    <ContainerButton
+                        title="functions"
+                        disabled={buttonDisabled || !$canWriteFunctions}
+                        buttonHref={`${base}/project-${page.params.region}-${page.params.project}/functions/create-function/template-${$template.id}`}
+                        showIcon={false}
+                        buttonText="Create function"
+                        buttonEvent="create_function"
+                        tooltipContent={!$canWriteFunctions
+                            ? 'Your role does not allow this action'
+                            : undefined} />
                 </Layout.Stack>
             </Layout.Stack>
         </Card>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
index 12821a0bf0..92ea9e9f36 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
@@ -23,11 +23,14 @@
     import {
         Badge,
         FloatingActionBar,
+        Icon,
         Layout,
         Link,
         Table,
+        Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { Confirm } from '$lib/components';
     import { onDestroy, onMount } from 'svelte';
     import { stopPolling, pollMessagesStatus } from './helper';
@@ -105,9 +108,15 @@
         hasSearch
         analyticsSource="messaging_messages"
         searchPlaceholder="Search by description, type, status, or ID">
-        {#if $canWriteMessages}
-            <CreateMessageDropdown />
-        {/if}
+        <Tooltip disabled={$canWriteMessages}>
+            <CreateMessageDropdown>
+                <Button event="create_message" disabled={!$canWriteMessages}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create message
+                </Button>
+            </CreateMessageDropdown>
+            <div slot="tooltip">Your role does not allow this action</div>
+        </Tooltip>
     </ResponsiveContainerHeader>
 
     {#if data.messages.total}
@@ -220,13 +229,18 @@
                     ariaLabel={`create message`}>
                     Documentation
                 </Button>
-                {#if $canWriteMessages}
+                <Tooltip disabled={$canWriteMessages}>
                     <CreateMessageDropdown let:toggle>
-                        <Button secondary on:click={toggle} event="create_message">
+                        <Button
+                            secondary
+                            on:click={toggle}
+                            event="create_message"
+                            disabled={!$canWriteMessages}>
                             <span class="text">Create message</span>
                         </Button>
                     </CreateMessageDropdown>
-                {/if}
+                    <div slot="tooltip">Your role does not allow this action</div>
+                </Tooltip>
             </svelte:fragment>
         </Empty>
     {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
index 8aed8a13be..57f52be28c 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
@@ -15,7 +15,7 @@
     import Table from './table.svelte';
     import { base } from '$app/paths';
     import { canWriteProviders } from '$lib/stores/roles';
-    import { Card, Layout, Empty, Icon } from '@appwrite.io/pink-svelte';
+    import { Card, Layout, Empty, Icon, Tooltip } from '@appwrite.io/pink-svelte';
     import { View } from '$lib/helpers/load';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
@@ -30,14 +30,18 @@
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <Filters query={data.query} {columns} analyticsSource="messaging_providers" />
             <ViewSelector view={View.Table} {columns} hideView />
-            {#if $canWriteProviders}
+            <Tooltip disabled={$canWriteProviders}>
                 <CreateProviderDropdown let:toggle>
-                    <Button on:click={toggle} event="create_provider">
+                    <Button
+                        on:click={toggle}
+                        event="create_provider"
+                        disabled={!$canWriteProviders}>
                         <Icon icon={IconPlus} slot="start" size="s" />
                         Create provider
                     </Button>
                 </CreateProviderDropdown>
-            {/if}
+                <div slot="tooltip">Your role does not allow this action</div>
+            </Tooltip>
         </Layout.Stack>
     </Layout.Stack>
 
@@ -75,13 +79,18 @@
                         text
                         event="empty_documentation"
                         size="s">Documentation</Button>
-                    {#if $canWriteProviders}
+                    <Tooltip disabled={$canWriteProviders}>
                         <CreateProviderDropdown let:toggle>
-                            <Button on:click={toggle} event="create_provider" secondary>
+                            <Button
+                                on:click={toggle}
+                                event="create_provider"
+                                secondary
+                                disabled={!$canWriteProviders}>
                                 Create provider
                             </Button>
                         </CreateProviderDropdown>
-                    {/if}
+                        <div slot="tooltip">Your role does not allow this action</div>
+                    </Tooltip>
                 </slot>
             </Empty>
         </Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
index 2833293ac4..f9b5f47bea 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
@@ -14,7 +14,7 @@
     import type { Column } from '$lib/helpers/types';
     import { writable } from 'svelte/store';
     import { canWriteTopics } from '$lib/stores/roles';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
     import { View } from '$lib/helpers/load';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -73,17 +73,19 @@
         hasSearch
         analyticsSource="messaging_topics_filter"
         searchPlaceholder="Search by name or ID">
-        {#if $canWriteTopics}
+        <Tooltip disabled={$canWriteTopics}>
             <Button
                 on:click={() => {
                     $showCreate = true;
                     trackEvent(Click.MessagingTopicCreateClick);
                 }}
-                event="create_topic">
+                event="create_topic"
+                disabled={!$canWriteTopics}>
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Create topic
             </Button>
-        {/if}
+            <div slot="tooltip">Your role does not allow this action</div>
+        </Tooltip>
     </ResponsiveContainerHeader>
 
     {#if data.topics.total}
diff --git a/src/routes/(console)/project-[region]-[project]/overview/api-keys/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/api-keys/action.svelte
index 20cb3a2270..a896511107 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/api-keys/action.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/api-keys/action.svelte
@@ -1,16 +1,18 @@
 <script>
     import Button from '$lib/elements/forms/button.svelte';
     import { canWriteKeys } from '$lib/stores/roles';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { base } from '$app/paths';
     import { page } from '$app/state';
 </script>
 
-{#if $canWriteKeys}
+<Tooltip disabled={$canWriteKeys}>
     <Button
-        href={`${base}/project-${page.params.region}-${page.params.project}/overview/api-keys/create`}>
+        href={`${base}/project-${page.params.region}-${page.params.project}/overview/api-keys/create`}
+        disabled={!$canWriteKeys}>
         <Icon icon={IconPlus} slot="start" size="s" />
         Create API key
     </Button>
-{/if}
+    <div slot="tooltip">Your role does not allow this action</div>
+</Tooltip>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte
index 027c36c404..9bf7db937a 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import Button from '$lib/elements/forms/button.svelte';
     import { canWriteKeys } from '$lib/stores/roles';
-    import { Icon, Modal, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Modal, Layout, Tooltip } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { Form, InputText } from '$lib/elements/forms/index.js';
     import { ExpirationInput } from '$lib/components';
@@ -44,34 +44,35 @@
     }
 </script>
 
-{#if $canWriteKeys}
-    <Button on:click={() => ($showDevKeysCreateModal = true)}>
+<Tooltip disabled={$canWriteKeys}>
+    <Button on:click={() => ($showDevKeysCreateModal = true)} disabled={!$canWriteKeys}>
         <Icon icon={IconPlus} slot="start" size="s" />
         Create dev key
     </Button>
+    <div slot="tooltip">Your role does not allow this action</div>
+</Tooltip>
 
-    <Form onSubmit={create} isModal>
-        <Modal title="Create dev key" bind:open={$showDevKeysCreateModal}>
-            <span slot="description">
-                Bypass Appwrite rate limits and CORS errors in your development environment.
-            </span>
+<Form onSubmit={create} isModal>
+    <Modal title="Create dev key" bind:open={$showDevKeysCreateModal}>
+        <span slot="description">
+            Bypass Appwrite rate limits and CORS errors in your development environment.
+        </span>
 
-            <Layout.Stack>
-                <InputText
-                    id="name"
-                    label="Name"
-                    placeholder="Enter key name"
-                    required
-                    bind:value={name} />
+        <Layout.Stack>
+            <InputText
+                id="name"
+                label="Name"
+                placeholder="Enter key name"
+                required
+                bind:value={name} />
 
-                <ExpirationInput bind:value={expire} expiryOptions="limited" />
-            </Layout.Stack>
+            <ExpirationInput bind:value={expire} expiryOptions="limited" />
+        </Layout.Stack>
 
-            <Layout.Stack direction="row" justifyContent="flex-end" slot="footer">
-                <Button fullWidthMobile secondary on:click={() => ($showDevKeysCreateModal = false)}
-                    >Cancel</Button>
-                <Button fullWidthMobile submit disabled={isSubmitting}>Create</Button>
-            </Layout.Stack>
-        </Modal>
-    </Form>
-{/if}
+        <Layout.Stack direction="row" justifyContent="flex-end" slot="footer">
+            <Button fullWidthMobile secondary on:click={() => ($showDevKeysCreateModal = false)}
+                >Cancel</Button>
+            <Button fullWidthMobile submit disabled={isSubmitting}>Create</Button>
+        </Layout.Stack>
+    </Modal>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
index 6c3ff7ef14..733934bff5 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
@@ -69,7 +69,8 @@
         Icon,
         Layout,
         Popover,
-        Table
+        Table,
+        Tooltip
     } from '@appwrite.io/pink-svelte';
     import Action from './action.svelte';
     import {
@@ -163,11 +164,12 @@
             <svelte:fragment slot="actions">
                 <Button external href="https://appwrite.io/docs/sdks" text>Documentation</Button>
                 <Popover let:toggle padding="none" placement="bottom-end">
-                    {#if $canWritePlatforms}
-                        <Button secondary on:click={toggle}>
+                    <Tooltip disabled={$canWritePlatforms}>
+                        <Button secondary on:click={toggle} disabled={!$canWritePlatforms}>
                             <span class="text">Add platform</span>
                         </Button>
-                    {/if}
+                        <div slot="tooltip">Your role does not allow this action</div>
+                    </Tooltip>
                     <svelte:fragment slot="tooltip">
                         <ActionMenu.Root>
                             <ActionMenu.Item.Button
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte
index 0f3c96b173..7444000410 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte
@@ -1,7 +1,7 @@
 <script>
     import Button from '$lib/elements/forms/button.svelte';
     import { canWritePlatforms } from '$lib/stores/roles';
-    import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Icon, Popover, Tooltip } from '@appwrite.io/pink-svelte';
     import { addPlatform, Platform } from './+page.svelte';
     import {
         IconAndroid,
@@ -13,42 +13,41 @@
     } from '@appwrite.io/pink-icons-svelte';
 </script>
 
-{#if $canWritePlatforms}
-    <Popover let:toggle padding="none" placement="bottom-end">
-        {#if $canWritePlatforms}
-            <Button on:click={toggle}>
-                <Icon icon={IconPlus} slot="start" />
-                <span class="text">Add platform</span>
-            </Button>
-        {/if}
-        <div style:min-width="232px" slot="tooltip">
-            <ActionMenu.Root>
-                <ActionMenu.Item.Button
-                    on:click={() => addPlatform(Platform.Web)}
-                    leadingIcon={IconCode}>
-                    Web
-                </ActionMenu.Item.Button>
-                <ActionMenu.Item.Button
-                    on:click={() => addPlatform(Platform.Flutter)}
-                    leadingIcon={IconFlutter}>
-                    Flutter
-                </ActionMenu.Item.Button>
-                <ActionMenu.Item.Button
-                    on:click={() => addPlatform(Platform.Android)}
-                    leadingIcon={IconAndroid}>
-                    Android
-                </ActionMenu.Item.Button>
-                <ActionMenu.Item.Button
-                    on:click={() => addPlatform(Platform.Apple)}
-                    leadingIcon={IconApple}>
-                    Apple
-                </ActionMenu.Item.Button>
-                <ActionMenu.Item.Button
-                    on:click={() => addPlatform(Platform.ReactNative)}
-                    leadingIcon={IconReact}>
-                    React Native
-                </ActionMenu.Item.Button>
-            </ActionMenu.Root>
-        </div>
-    </Popover>
-{/if}
+<Popover let:toggle padding="none" placement="bottom-end">
+    <Tooltip disabled={$canWritePlatforms}>
+        <Button on:click={toggle} disabled={!$canWritePlatforms}>
+            <Icon icon={IconPlus} slot="start" />
+            <span class="text">Add platform</span>
+        </Button>
+        <div slot="tooltip">Your role does not allow this action</div>
+    </Tooltip>
+    <div style:min-width="232px" slot="tooltip">
+        <ActionMenu.Root>
+            <ActionMenu.Item.Button
+                on:click={() => addPlatform(Platform.Web)}
+                leadingIcon={IconCode}>
+                Web
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={() => addPlatform(Platform.Flutter)}
+                leadingIcon={IconFlutter}>
+                Flutter
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={() => addPlatform(Platform.Android)}
+                leadingIcon={IconAndroid}>
+                Android
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={() => addPlatform(Platform.Apple)}
+                leadingIcon={IconApple}>
+                Apple
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={() => addPlatform(Platform.ReactNative)}
+                leadingIcon={IconReact}>
+                React Native
+            </ActionMenu.Item.Button>
+        </ActionMenu.Root>
+    </div>
+</Popover>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte
index b9affbece6..cec9955dc7 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/updateName.svelte
@@ -6,6 +6,7 @@
     import { CardGrid, CopyInput } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
+    import { Tooltip } from '@appwrite.io/pink-svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -55,22 +56,25 @@
         </Button>
     </svelte:fragment>
 </CardGrid>
-{#if $canWriteProjects}
-    <Form onSubmit={updateName}>
-        <CardGrid>
-            <svelte:fragment slot="title">Name</svelte:fragment>
-            <svelte:fragment slot="aside">
-                <InputText
-                    id="name"
-                    label="Name"
-                    bind:value={name}
-                    required
-                    placeholder="Enter name" />
-            </svelte:fragment>
+<Form onSubmit={updateName}>
+    <CardGrid>
+        <svelte:fragment slot="title">Name</svelte:fragment>
+        <svelte:fragment slot="aside">
+            <InputText
+                id="name"
+                label="Name"
+                bind:value={name}
+                required
+                placeholder="Enter name"
+                disabled={!$canWriteProjects} />
+        </svelte:fragment>
 
-            <svelte:fragment slot="actions">
-                <Button disabled={name === $project.name} submit>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-    </Form>
-{/if}
+        <svelte:fragment slot="actions">
+            <Tooltip disabled={$canWriteProjects}>
+                <Button disabled={name === $project.name || !$canWriteProjects} submit
+                    >Update</Button>
+                <div slot="tooltip">Your role does not allow this action</div>
+            </Tooltip>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
index 2c02dc1978..df78533dcd 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
@@ -11,7 +11,7 @@
     import { type Models } from '@appwrite.io/console';
     import FailedModal from './failedModal.svelte';
     import { canWriteWebhooks } from '$lib/stores/roles';
-    import { Icon, Layout, Link, Status, Table } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Link, Status, Table, Tooltip } from '@appwrite.io/pink-svelte';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { View } from '$lib/helpers/load';
@@ -28,14 +28,16 @@
 <Container>
     <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
         <ViewSelector {columns} view={View.Table} hideView />
-        {#if $canWriteWebhooks}
+        <Tooltip disabled={$canWriteWebhooks}>
             <Button
                 href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`}
-                event="create_webhook">
+                event="create_webhook"
+                disabled={!$canWriteWebhooks}>
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Create webhook
             </Button>
-        {/if}
+            <div slot="tooltip">Your role does not allow this action</div>
+        </Tooltip>
     </Layout.Stack>
 
     {#if data.webhooks.total}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
index 40e9de1d53..696ae4daaf 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
@@ -11,7 +11,7 @@
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { canWriteSites } from '$lib/stores/roles.js';
-    import { Card, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Card, Icon, Layout, Typography, Tooltip } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import { app } from '$lib/stores/app';
     import CreateSiteModal from './createSiteModal.svelte';
@@ -97,12 +97,17 @@
                     view={data.view}
                     hideColumns
                     hideView={!data.siteList.total} />
-                {#if $canWriteSites}
-                    <Button on:mousedown={() => (show = true)} event="create_site" size="s">
+                <Tooltip disabled={$canWriteSites}>
+                    <Button
+                        on:mousedown={() => (show = true)}
+                        event="create_site"
+                        size="s"
+                        disabled={!$canWriteSites}>
                         <Icon icon={IconPlus} slot="start" size="s" />
                         Create site
                     </Button>
-                {/if}
+                    <div slot="tooltip">Your role does not allow this action</div>
+                </Tooltip>
             </Layout.Stack>
         </Layout.Stack>
         {#if data.siteList.total}
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
index 7bbac81ce1..5ded0547ff 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
@@ -12,7 +12,7 @@
     import type { Models } from '@appwrite.io/console';
     import { writable } from 'svelte/store';
     import { canWriteBuckets } from '$lib/stores/roles';
-    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Tooltip } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import { columns } from './store';
     import Grid from './grid.svelte';
@@ -43,12 +43,17 @@
                 view={data.view}
                 hideColumns={!data.buckets.total}
                 hideView={!data.buckets.total} />
-            {#if $canWriteBuckets}
-                <Button on:click={() => ($showCreateBucket = true)} event="create_bucket" size="s">
+            <Tooltip disabled={$canWriteBuckets}>
+                <Button
+                    on:click={() => ($showCreateBucket = true)}
+                    event="create_bucket"
+                    size="s"
+                    disabled={!$canWriteBuckets}>
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create bucket
                 </Button>
-            {/if}
+                <div slot="tooltip">Your role does not allow this action</div>
+            </Tooltip>
         </Layout.Stack>
     </Layout.Stack>
     {#if data.buckets.total}

From 149e009de4c5aba76526695422d93804a0e05e24 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 18 Aug 2025 19:23:05 +0530
Subject: [PATCH 2/2] fix: wrap content in div

---
 .../organization-[organization]/+page.svelte  | 16 ++++----
 .../databases/+page.svelte                    | 16 ++++----
 .../database-[database]/+page.svelte          | 16 ++++----
 .../attributes/+page.svelte                   | 34 +++++++++-------
 .../indexes/+page.svelte                      | 16 ++++----
 .../messaging/+page.svelte                    | 14 ++++---
 .../messaging/providers/+page.svelte          | 40 ++++++++++---------
 .../messaging/topics/+page.svelte             | 22 +++++-----
 .../overview/api-keys/action.svelte           | 14 ++++---
 .../overview/dev-keys/action.svelte           | 10 +++--
 .../overview/platforms/+page.svelte           |  8 ++--
 .../overview/platforms/action.svelte          | 10 +++--
 .../settings/webhooks/+page.svelte            | 16 ++++----
 .../sites/+page.svelte                        | 18 +++++----
 .../storage/+page.svelte                      | 18 +++++----
 15 files changed, 151 insertions(+), 117 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/+page.svelte b/src/routes/(console)/organization-[organization]/+page.svelte
index a982e71dfe..fb565480dc 100644
--- a/src/routes/(console)/organization-[organization]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/+page.svelte
@@ -148,13 +148,15 @@
 
         <DropList bind:show={showDropdown} placement="bottom-end">
             <Tooltip disabled={$canWriteProjects}>
-                <Button
-                    on:click={handleCreateProject}
-                    event="create_project"
-                    disabled={($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteProjects}>
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create project
-                </Button>
+                <div>
+                    <Button
+                        on:click={handleCreateProject}
+                        event="create_project"
+                        disabled={($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteProjects}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Create project
+                    </Button>
+                </div>
                 <div slot="tooltip">Your role does not allow this action</div>
             </Tooltip>
             <svelte:fragment slot="list">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
index 56fccf0c61..cc2e3e8e72 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
@@ -58,13 +58,15 @@
                 hideColumns={!data.databases.total}
                 hideView={!data.databases.total} />
             <Tooltip disabled={$canWriteDatabases}>
-                <Button
-                    on:click={() => (showCreate = true)}
-                    event="create_database"
-                    disabled={isCreationDisabled || !$canWriteDatabases}>
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create database
-                </Button>
+                <div>
+                    <Button
+                        on:click={() => (showCreate = true)}
+                        event="create_database"
+                        disabled={isCreationDisabled || !$canWriteDatabases}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Create database
+                    </Button>
+                </div>
                 <div slot="tooltip">Your role does not allow this action</div>
             </Tooltip>
         </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
index 4668c7dea2..5ff2b9abd2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
@@ -20,13 +20,15 @@
         hasSearch
         searchPlaceholder="Search by name or ID">
         <Tooltip disabled={$canWriteCollections}>
-            <Button
-                on:click={() => ($showCreate = true)}
-                event="create_collection"
-                disabled={!$canWriteCollections}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Create collection
-            </Button>
+            <div>
+                <Button
+                    on:click={() => ($showCreate = true)}
+                    event="create_collection"
+                    disabled={!$canWriteCollections}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create collection
+                </Button>
+            </div>
             <div slot="tooltip">Your role does not allow this action</div>
         </Tooltip>
     </ResponsiveContainerHeader>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index c52186183c..57e63a105a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -78,12 +78,14 @@
     <Layout.Stack direction="row" justifyContent="space-between">
         <Typography.Title>Attributes</Typography.Title>
         <Tooltip disabled={$canWriteCollections}>
-            <CreateAttributeDropdown bind:selectedOption bind:showCreate>
-                <Button event="create_attribute" disabled={!$canWriteCollections}>
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create attribute
-                </Button>
-            </CreateAttributeDropdown>
+            <div>
+                <CreateAttributeDropdown bind:selectedOption bind:showCreate>
+                    <Button event="create_attribute" disabled={!$canWriteCollections}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Create attribute
+                    </Button>
+                </CreateAttributeDropdown>
+            </div>
             <div slot="tooltip">Your role does not allow this action</div>
         </Tooltip>
     </Layout.Stack>
@@ -243,15 +245,17 @@
                     event="empty_documentation"
                     ariaLabel={`create {target}`}>Documentation</Button>
                 <Tooltip disabled={$canWriteCollections}>
-                    <CreateAttributeDropdown bind:selectedOption bind:showCreate let:toggle>
-                        <Button
-                            secondary
-                            event="create_attribute"
-                            on:click={toggle}
-                            disabled={!$canWriteCollections}>
-                            Create attribute
-                        </Button>
-                    </CreateAttributeDropdown>
+                    <div>
+                        <CreateAttributeDropdown bind:selectedOption bind:showCreate let:toggle>
+                            <Button
+                                secondary
+                                event="create_attribute"
+                                on:click={toggle}
+                                disabled={!$canWriteCollections}>
+                                Create attribute
+                            </Button>
+                        </CreateAttributeDropdown>
+                    </div>
                     <div slot="tooltip">Your role does not allow this action</div>
                 </Tooltip>
             </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 0162a14e41..8b1597c558 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -61,13 +61,15 @@
     <Layout.Stack direction="row" justifyContent="space-between">
         <Typography.Title>Indexes</Typography.Title>
         <Tooltip disabled={$canWriteCollections}>
-            <Button
-                event="create_index"
-                disabled={!$collection?.attributes?.length || !$canWriteCollections}
-                on:click={() => (showCreateIndex = true)}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Create index
-            </Button>
+            <div>
+                <Button
+                    event="create_index"
+                    disabled={!$collection?.attributes?.length || !$canWriteCollections}
+                    on:click={() => (showCreateIndex = true)}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create index
+                </Button>
+            </div>
             <div slot="tooltip">Your role does not allow this action</div>
         </Tooltip>
     </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
index 92ea9e9f36..701ae3c04d 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
@@ -109,12 +109,14 @@
         analyticsSource="messaging_messages"
         searchPlaceholder="Search by description, type, status, or ID">
         <Tooltip disabled={$canWriteMessages}>
-            <CreateMessageDropdown>
-                <Button event="create_message" disabled={!$canWriteMessages}>
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create message
-                </Button>
-            </CreateMessageDropdown>
+            <div>
+                <CreateMessageDropdown>
+                    <Button event="create_message" disabled={!$canWriteMessages}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Create message
+                    </Button>
+                </CreateMessageDropdown>
+            </div>
             <div slot="tooltip">Your role does not allow this action</div>
         </Tooltip>
     </ResponsiveContainerHeader>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
index 57f52be28c..525edaa660 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
@@ -31,15 +31,17 @@
             <Filters query={data.query} {columns} analyticsSource="messaging_providers" />
             <ViewSelector view={View.Table} {columns} hideView />
             <Tooltip disabled={$canWriteProviders}>
-                <CreateProviderDropdown let:toggle>
-                    <Button
-                        on:click={toggle}
-                        event="create_provider"
-                        disabled={!$canWriteProviders}>
-                        <Icon icon={IconPlus} slot="start" size="s" />
-                        Create provider
-                    </Button>
-                </CreateProviderDropdown>
+                <div>
+                    <CreateProviderDropdown let:toggle>
+                        <Button
+                            on:click={toggle}
+                            event="create_provider"
+                            disabled={!$canWriteProviders}>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Create provider
+                        </Button>
+                    </CreateProviderDropdown>
+                </div>
                 <div slot="tooltip">Your role does not allow this action</div>
             </Tooltip>
         </Layout.Stack>
@@ -80,15 +82,17 @@
                         event="empty_documentation"
                         size="s">Documentation</Button>
                     <Tooltip disabled={$canWriteProviders}>
-                        <CreateProviderDropdown let:toggle>
-                            <Button
-                                on:click={toggle}
-                                event="create_provider"
-                                secondary
-                                disabled={!$canWriteProviders}>
-                                Create provider
-                            </Button>
-                        </CreateProviderDropdown>
+                        <div>
+                            <CreateProviderDropdown let:toggle>
+                                <Button
+                                    on:click={toggle}
+                                    event="create_provider"
+                                    secondary
+                                    disabled={!$canWriteProviders}>
+                                    Create provider
+                                </Button>
+                            </CreateProviderDropdown>
+                        </div>
                         <div slot="tooltip">Your role does not allow this action</div>
                     </Tooltip>
                 </slot>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
index f9b5f47bea..eb3383209c 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
@@ -74,16 +74,18 @@
         analyticsSource="messaging_topics_filter"
         searchPlaceholder="Search by name or ID">
         <Tooltip disabled={$canWriteTopics}>
-            <Button
-                on:click={() => {
-                    $showCreate = true;
-                    trackEvent(Click.MessagingTopicCreateClick);
-                }}
-                event="create_topic"
-                disabled={!$canWriteTopics}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Create topic
-            </Button>
+            <div>
+                <Button
+                    on:click={() => {
+                        $showCreate = true;
+                        trackEvent(Click.MessagingTopicCreateClick);
+                    }}
+                    event="create_topic"
+                    disabled={!$canWriteTopics}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create topic
+                </Button>
+            </div>
             <div slot="tooltip">Your role does not allow this action</div>
         </Tooltip>
     </ResponsiveContainerHeader>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/api-keys/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/api-keys/action.svelte
index a896511107..4f8c45ddbc 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/api-keys/action.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/api-keys/action.svelte
@@ -8,11 +8,13 @@
 </script>
 
 <Tooltip disabled={$canWriteKeys}>
-    <Button
-        href={`${base}/project-${page.params.region}-${page.params.project}/overview/api-keys/create`}
-        disabled={!$canWriteKeys}>
-        <Icon icon={IconPlus} slot="start" size="s" />
-        Create API key
-    </Button>
+    <div>
+        <Button
+            href={`${base}/project-${page.params.region}-${page.params.project}/overview/api-keys/create`}
+            disabled={!$canWriteKeys}>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create API key
+        </Button>
+    </div>
     <div slot="tooltip">Your role does not allow this action</div>
 </Tooltip>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte
index 9bf7db937a..f18234ac3c 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte
@@ -45,10 +45,12 @@
 </script>
 
 <Tooltip disabled={$canWriteKeys}>
-    <Button on:click={() => ($showDevKeysCreateModal = true)} disabled={!$canWriteKeys}>
-        <Icon icon={IconPlus} slot="start" size="s" />
-        Create dev key
-    </Button>
+    <div>
+        <Button on:click={() => ($showDevKeysCreateModal = true)} disabled={!$canWriteKeys}>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create dev key
+        </Button>
+    </div>
     <div slot="tooltip">Your role does not allow this action</div>
 </Tooltip>
 
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
index 733934bff5..a730b6bf3f 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
@@ -165,9 +165,11 @@
                 <Button external href="https://appwrite.io/docs/sdks" text>Documentation</Button>
                 <Popover let:toggle padding="none" placement="bottom-end">
                     <Tooltip disabled={$canWritePlatforms}>
-                        <Button secondary on:click={toggle} disabled={!$canWritePlatforms}>
-                            <span class="text">Add platform</span>
-                        </Button>
+                        <div>
+                            <Button secondary on:click={toggle} disabled={!$canWritePlatforms}>
+                                <span class="text">Add platform</span>
+                            </Button>
+                        </div>
                         <div slot="tooltip">Your role does not allow this action</div>
                     </Tooltip>
                     <svelte:fragment slot="tooltip">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte
index 7444000410..21517ac520 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte
@@ -15,10 +15,12 @@
 
 <Popover let:toggle padding="none" placement="bottom-end">
     <Tooltip disabled={$canWritePlatforms}>
-        <Button on:click={toggle} disabled={!$canWritePlatforms}>
-            <Icon icon={IconPlus} slot="start" />
-            <span class="text">Add platform</span>
-        </Button>
+        <div>
+            <Button on:click={toggle} disabled={!$canWritePlatforms}>
+                <Icon icon={IconPlus} slot="start" />
+                <span class="text">Add platform</span>
+            </Button>
+        </div>
         <div slot="tooltip">Your role does not allow this action</div>
     </Tooltip>
     <div style:min-width="232px" slot="tooltip">
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
index df78533dcd..9d58fae438 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
@@ -29,13 +29,15 @@
     <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
         <ViewSelector {columns} view={View.Table} hideView />
         <Tooltip disabled={$canWriteWebhooks}>
-            <Button
-                href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`}
-                event="create_webhook"
-                disabled={!$canWriteWebhooks}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Create webhook
-            </Button>
+            <div>
+                <Button
+                    href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`}
+                    event="create_webhook"
+                    disabled={!$canWriteWebhooks}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create webhook
+                </Button>
+            </div>
             <div slot="tooltip">Your role does not allow this action</div>
         </Tooltip>
     </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
index 696ae4daaf..1b1c56a7c9 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
@@ -98,14 +98,16 @@
                     hideColumns
                     hideView={!data.siteList.total} />
                 <Tooltip disabled={$canWriteSites}>
-                    <Button
-                        on:mousedown={() => (show = true)}
-                        event="create_site"
-                        size="s"
-                        disabled={!$canWriteSites}>
-                        <Icon icon={IconPlus} slot="start" size="s" />
-                        Create site
-                    </Button>
+                    <div>
+                        <Button
+                            on:mousedown={() => (show = true)}
+                            event="create_site"
+                            size="s"
+                            disabled={!$canWriteSites}>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Create site
+                        </Button>
+                    </div>
                     <div slot="tooltip">Your role does not allow this action</div>
                 </Tooltip>
             </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
index 5ded0547ff..83247cd42f 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
@@ -44,14 +44,16 @@
                 hideColumns={!data.buckets.total}
                 hideView={!data.buckets.total} />
             <Tooltip disabled={$canWriteBuckets}>
-                <Button
-                    on:click={() => ($showCreateBucket = true)}
-                    event="create_bucket"
-                    size="s"
-                    disabled={!$canWriteBuckets}>
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create bucket
-                </Button>
+                <div>
+                    <Button
+                        on:click={() => ($showCreateBucket = true)}
+                        event="create_bucket"
+                        size="s"
+                        disabled={!$canWriteBuckets}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Create bucket
+                    </Button>
+                </div>
                 <div slot="tooltip">Your role does not allow this action</div>
             </Tooltip>
         </Layout.Stack>