From d9ce3a498df17a17a941354243edc605802a914f Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Thu, 26 Jun 2025 16:28:25 +0530
Subject: [PATCH 1/7] fix: improve modal focus with dual autofocus strategy

---
 .../billing/validateCreditModal.svelte        |  1 +
 src/lib/components/feedback/evaluation.svelte | 17 +++++++-
 .../feedback/feedbackGeneral.svelte           | 11 ++++++
 src/lib/components/modal.svelte               | 39 +++++++++++++++++++
 src/lib/layout/createProject.svelte           | 26 +++++++++++++
 .../create-organization/+page.svelte          | 25 ++++++++++++
 .../onboarding/create-project/+page.svelte    | 26 ++++++++++++-
 .../domains/add-domain/+page.svelte           |  1 +
 .../domain-[domain]/createRecordModal.svelte  |  8 +++-
 .../overview/platforms/createWeb.svelte       |  1 +
 .../settings/domains/add-domain/+page.svelte  |  1 +
 .../domains/createPreviewDomainModal.svelte   |  2 +-
 12 files changed, 154 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/billing/validateCreditModal.svelte b/src/lib/components/billing/validateCreditModal.svelte
index e73ea2949..9b2f02691 100644
--- a/src/lib/components/billing/validateCreditModal.svelte
+++ b/src/lib/components/billing/validateCreditModal.svelte
@@ -58,6 +58,7 @@
         placeholder="Promo code"
         id="code"
         label="Add promo code"
+        autofocus
         bind:value={coupon} />
 
     <svelte:fragment slot="footer">
diff --git a/src/lib/components/feedback/evaluation.svelte b/src/lib/components/feedback/evaluation.svelte
index deaad320f..5aafc8902 100644
--- a/src/lib/components/feedback/evaluation.svelte
+++ b/src/lib/components/feedback/evaluation.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { Tag } from '@appwrite.io/pink-svelte';
 
     export let value: number = null;
+
+    onMount(() => {
+        setTimeout(() => {
+            const firstButton = document.querySelector('[data-rating="0"]') as HTMLElement;
+            if (firstButton) {
+                firstButton.focus();
+            }
+        }, 150);
+    });
 </script>
 
 <fieldset class="u-margin-block-start-8 u-min-width-0">
@@ -10,7 +20,12 @@
         style="padding-block: 0.13rem">
         {#each Array(11) as _, i}
             <li>
-                <Tag size="m" selected={value === i} on:click={() => (value = i)}>
+                <Tag
+                    size="m"
+                    selected={value === i}
+                    autofocus={i === 0}
+                    data-rating={i}
+                    on:click={() => (value = i)}>
                     {i}
                 </Tag>
             </li>
diff --git a/src/lib/components/feedback/feedbackGeneral.svelte b/src/lib/components/feedback/feedbackGeneral.svelte
index a60f65f01..a74ff90be 100644
--- a/src/lib/components/feedback/feedbackGeneral.svelte
+++ b/src/lib/components/feedback/feedbackGeneral.svelte
@@ -1,11 +1,22 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { InputTextarea } from '$lib/elements/forms';
     import { feedbackData } from '$lib/stores/feedback';
+
+    onMount(() => {
+        setTimeout(() => {
+            const textarea = document.getElementById('feedback') as HTMLTextAreaElement;
+            if (textarea) {
+                textarea.focus();
+            }
+        }, 150);
+    });
 </script>
 
 <InputTextarea
     required
     id="feedback"
+    autofocus
     bind:value={$feedbackData.message}
     label="Tell us more about your experience"
     placeholder="Share your suggestions and feature requests..." />
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 2eb562336..6db9a61f1 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -14,6 +14,7 @@
     };
     export let title = '';
     export let hideFooter = false;
+    export let autoFocus = true;
 
     let alert: HTMLElement;
 
@@ -26,6 +27,44 @@
     $: if (error) {
         alert?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
     }
+
+    $: if (show && autoFocus) {
+        setTimeout(() => {
+            focusFirstElement();
+        }, 100);
+    }
+
+    function focusFirstElement() {
+        const modalDialog = document.querySelector('dialog[open]') as HTMLElement;
+        if (!modalDialog) return;
+
+        const autofocusElement = modalDialog.querySelector('[autofocus]') as HTMLElement;
+        if (autofocusElement) {
+            autofocusElement.focus();
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (activeElement && modalDialog.contains(activeElement)) {
+            return;
+        }
+        const focusableSelectors = [
+            'input:not([disabled]):not([readonly]):not([type="hidden"])',
+            'textarea:not([disabled]):not([readonly])',
+            'select:not([disabled])',
+            'button:not([disabled])',
+            'a[href]:not([disabled])',
+            '[tabindex]:not([tabindex="-1"]):not([disabled])',
+            '.card-selector:not([disabled])',
+            '[role="button"]:not([disabled])',
+            '[role="link"]:not([disabled])',
+            '[contenteditable="true"]:not([disabled])'
+        ].join(', ');
+
+        const firstFocusable = modalDialog.querySelector(focusableSelectors) as HTMLElement;
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
+    }
 </script>
 
 <Form isModal {onSubmit}>
diff --git a/src/lib/layout/createProject.svelte b/src/lib/layout/createProject.svelte
index 1f75e59b1..1bf014d0a 100644
--- a/src/lib/layout/createProject.svelte
+++ b/src/lib/layout/createProject.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { Layout, Typography, Input, Tag, Icon } from '@appwrite.io/pink-svelte';
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { CustomId } from '$lib/components/index.js';
@@ -14,6 +15,30 @@
     export let showTitle = true;
 
     let showCustomId = false;
+
+    onMount(() => {
+        setTimeout(() => {
+            let nameInput = document.querySelector(
+                'input[placeholder="Project name"]'
+            ) as HTMLInputElement;
+            if (!nameInput) {
+                nameInput = document.querySelector(
+                    'input[type="text"]:first-of-type'
+                ) as HTMLInputElement;
+            }
+            if (!nameInput) {
+                nameInput = document.querySelector('input:first-of-type') as HTMLInputElement;
+            }
+
+            console.log('CreateProject - Found input:', nameInput);
+            if (nameInput) {
+                nameInput.focus();
+                console.log('CreateProject - Focused project name input');
+            } else {
+                console.log('CreateProject - Could not find project name input');
+            }
+        }, 150);
+    });
 </script>
 
 <svelte:head>
@@ -34,6 +59,7 @@
                         label="Name"
                         placeholder="Project name"
                         required
+                        autofocus
                         bind:value={projectName} />
                     {#if !showCustomId}
                         <div>
diff --git a/src/routes/(console)/onboarding/create-organization/+page.svelte b/src/routes/(console)/onboarding/create-organization/+page.svelte
index 0118c0e3c..fd7c4c257 100644
--- a/src/routes/(console)/onboarding/create-organization/+page.svelte
+++ b/src/routes/(console)/onboarding/create-organization/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { isCloud } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
@@ -15,6 +16,29 @@
     let isLoading = false;
     let organizationName = 'Personal Projects';
 
+    onMount(() => {
+        setTimeout(() => {
+            let nameInput = document.querySelector(
+                'input[placeholder="Personal Projects"]'
+            ) as HTMLInputElement;
+            if (!nameInput) {
+                nameInput = document.querySelector('input[type="text"]') as HTMLInputElement;
+            }
+            if (!nameInput) {
+                nameInput = document.querySelector('input') as HTMLInputElement;
+            }
+
+            console.log('Found input:', nameInput);
+            if (nameInput) {
+                nameInput.focus();
+                nameInput.select();
+                console.log('Focused organization name input');
+            } else {
+                console.log('Could not find organization name input');
+            }
+        }, 100);
+    });
+
     async function createOrganization() {
         isLoading = true;
         let organization = null;
@@ -66,6 +90,7 @@
 
                     <Input.Text
                         required
+                        autofocus
                         disabled={isLoading}
                         label="Organization name"
                         bind:value={organizationName}
diff --git a/src/routes/(console)/onboarding/create-project/+page.svelte b/src/routes/(console)/onboarding/create-project/+page.svelte
index a2ff8844c..f9f2a4fb5 100644
--- a/src/routes/(console)/onboarding/create-project/+page.svelte
+++ b/src/routes/(console)/onboarding/create-project/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { Card, Layout, Button } from '@appwrite.io/pink-svelte';
     import { isCloud } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
@@ -22,6 +23,29 @@
 
     export let data;
 
+    onMount(() => {
+        setTimeout(() => {
+            let nameInput = document.querySelector(
+                'input[placeholder="Project name"]'
+            ) as HTMLInputElement;
+            if (!nameInput) {
+                nameInput = document.querySelector('input[type="text"]') as HTMLInputElement;
+            }
+            if (!nameInput) {
+                nameInput = document.querySelector('input') as HTMLInputElement;
+            }
+
+            console.log('Found input:', nameInput);
+            if (nameInput) {
+                nameInput.focus();
+                nameInput.select();
+                console.log('Focused project name input');
+            } else {
+                console.log('Could not find project name input');
+            }
+        }, 100);
+    });
+
     function markOnboardingComplete() {
         const currentPrefs = data.accountPrefs ?? $user.prefs;
 
@@ -102,7 +126,7 @@
                 on:submit={createProject}>
                 <svelte:fragment slot="submit">
                     <Layout.Stack direction="row" justifyContent="flex-end">
-                        <Button.Button autofocus type="submit" variant="primary" size="s">
+                        <Button.Button type="submit" variant="primary" size="s">
                             Create
                         </Button.Button>
                     </Layout.Stack>
diff --git a/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte b/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte
index 9e0903a61..1b43c1492 100644
--- a/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte
@@ -50,6 +50,7 @@
                         name="domain"
                         bind:value={domainName}
                         required
+                        autofocus
                         placeholder="example.com" />
 
                     <Divider />
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte
index 1ddcdb4e6..307d6c1e7 100644
--- a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte
@@ -84,7 +84,13 @@
         DNS records map domain names to IP addresses or other resources.
     </span>
     <Layout.Stack gap="l">
-        <InputText id="name" label="Name" placeholder="subdomain" bind:value={name} required />
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="subdomain"
+            bind:value={name}
+            required
+            autofocus />
         <Layout.Stack gap="xs">
             <InputSelect options={recordTypes} bind:value={type} id="type" label="Type" required />
             <Input.Helper state="default">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
index 75ac4daa5..de54faf48 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -235,6 +235,7 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                                 id="hostname"
                                 label="Hostname"
                                 placeholder="localhost"
+                                autofocus
                                 error={hostnameError && 'Please enter a valid hostname'}
                                 bind:value={hostname}>
                                 <Tooltip slot="info">
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte
index ad574bf26..6f657be43 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte
@@ -77,6 +77,7 @@
             id="domain"
             bind:value={domainName}
             required
+            autofocus
             placeholder="appwrite.example.com" />
     </Form>
 
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/createPreviewDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/createPreviewDomainModal.svelte
index fa23726b0..ebc3009c4 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/createPreviewDomainModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/createPreviewDomainModal.svelte
@@ -88,7 +88,7 @@
 
     <Layout.Stack>
         <Layout.Stack gap="s">
-            <InputText id="domain" placeholder="my-domain" bind:value={domain}>
+            <InputText id="domain" placeholder="my-domain" bind:value={domain} autofocus>
                 <svelte:fragment slot="end">
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                         .{$regionalConsoleVariables._APP_DOMAIN_SITES}

From f26a0808a3b70165d78fe0e78bedc4c4b747e8b7 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Fri, 27 Jun 2025 17:46:50 +0530
Subject: [PATCH 2/7] fix:added focus for other buttons still need to add for
 others

---
 src/lib/components/feedback/evaluation.svelte | 10 -----
 src/lib/components/modal.svelte               | 39 -------------------
 src/lib/layout/createProject.svelte           | 25 ------------
 .../create-organization/+page.svelte          |  1 +
 .../create-organization/+page.svelte          | 24 ------------
 .../onboarding/create-project/+page.svelte    | 24 ------------
 .../createMember.svelte                       |  3 +-
 .../members/+page.svelte                      |  2 +-
 .../auth/createUser.svelte                    |  2 +-
 .../teams/team-[team]/createMembership.svelte |  2 +-
 10 files changed, 6 insertions(+), 126 deletions(-)

diff --git a/src/lib/components/feedback/evaluation.svelte b/src/lib/components/feedback/evaluation.svelte
index 5aafc8902..1b04a3f81 100644
--- a/src/lib/components/feedback/evaluation.svelte
+++ b/src/lib/components/feedback/evaluation.svelte
@@ -1,17 +1,7 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
     import { Tag } from '@appwrite.io/pink-svelte';
 
     export let value: number = null;
-
-    onMount(() => {
-        setTimeout(() => {
-            const firstButton = document.querySelector('[data-rating="0"]') as HTMLElement;
-            if (firstButton) {
-                firstButton.focus();
-            }
-        }, 150);
-    });
 </script>
 
 <fieldset class="u-margin-block-start-8 u-min-width-0">
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 6db9a61f1..2eb562336 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -14,7 +14,6 @@
     };
     export let title = '';
     export let hideFooter = false;
-    export let autoFocus = true;
 
     let alert: HTMLElement;
 
@@ -27,44 +26,6 @@
     $: if (error) {
         alert?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
     }
-
-    $: if (show && autoFocus) {
-        setTimeout(() => {
-            focusFirstElement();
-        }, 100);
-    }
-
-    function focusFirstElement() {
-        const modalDialog = document.querySelector('dialog[open]') as HTMLElement;
-        if (!modalDialog) return;
-
-        const autofocusElement = modalDialog.querySelector('[autofocus]') as HTMLElement;
-        if (autofocusElement) {
-            autofocusElement.focus();
-            return;
-        }
-        const activeElement = document.activeElement;
-        if (activeElement && modalDialog.contains(activeElement)) {
-            return;
-        }
-        const focusableSelectors = [
-            'input:not([disabled]):not([readonly]):not([type="hidden"])',
-            'textarea:not([disabled]):not([readonly])',
-            'select:not([disabled])',
-            'button:not([disabled])',
-            'a[href]:not([disabled])',
-            '[tabindex]:not([tabindex="-1"]):not([disabled])',
-            '.card-selector:not([disabled])',
-            '[role="button"]:not([disabled])',
-            '[role="link"]:not([disabled])',
-            '[contenteditable="true"]:not([disabled])'
-        ].join(', ');
-
-        const firstFocusable = modalDialog.querySelector(focusableSelectors) as HTMLElement;
-        if (firstFocusable) {
-            firstFocusable.focus();
-        }
-    }
 </script>
 
 <Form isModal {onSubmit}>
diff --git a/src/lib/layout/createProject.svelte b/src/lib/layout/createProject.svelte
index 1bf014d0a..856eea30f 100644
--- a/src/lib/layout/createProject.svelte
+++ b/src/lib/layout/createProject.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
     import { Layout, Typography, Input, Tag, Icon } from '@appwrite.io/pink-svelte';
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { CustomId } from '$lib/components/index.js';
@@ -15,30 +14,6 @@
     export let showTitle = true;
 
     let showCustomId = false;
-
-    onMount(() => {
-        setTimeout(() => {
-            let nameInput = document.querySelector(
-                'input[placeholder="Project name"]'
-            ) as HTMLInputElement;
-            if (!nameInput) {
-                nameInput = document.querySelector(
-                    'input[type="text"]:first-of-type'
-                ) as HTMLInputElement;
-            }
-            if (!nameInput) {
-                nameInput = document.querySelector('input:first-of-type') as HTMLInputElement;
-            }
-
-            console.log('CreateProject - Found input:', nameInput);
-            if (nameInput) {
-                nameInput.focus();
-                console.log('CreateProject - Focused project name input');
-            } else {
-                console.log('CreateProject - Could not find project name input');
-            }
-        }, 150);
-    });
 </script>
 
 <svelte:head>
diff --git a/src/routes/(console)/create-organization/+page.svelte b/src/routes/(console)/create-organization/+page.svelte
index a45c2cdc3..7cb126160 100644
--- a/src/routes/(console)/create-organization/+page.svelte
+++ b/src/routes/(console)/create-organization/+page.svelte
@@ -186,6 +186,7 @@
                     bind:value={name}
                     label="Organization name"
                     placeholder="Enter organization name"
+                    autofocus
                     id="name"
                     required />
             </Fieldset>
diff --git a/src/routes/(console)/onboarding/create-organization/+page.svelte b/src/routes/(console)/onboarding/create-organization/+page.svelte
index fd7c4c257..a5cfa3a3d 100644
--- a/src/routes/(console)/onboarding/create-organization/+page.svelte
+++ b/src/routes/(console)/onboarding/create-organization/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
     import { isCloud } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
@@ -16,29 +15,6 @@
     let isLoading = false;
     let organizationName = 'Personal Projects';
 
-    onMount(() => {
-        setTimeout(() => {
-            let nameInput = document.querySelector(
-                'input[placeholder="Personal Projects"]'
-            ) as HTMLInputElement;
-            if (!nameInput) {
-                nameInput = document.querySelector('input[type="text"]') as HTMLInputElement;
-            }
-            if (!nameInput) {
-                nameInput = document.querySelector('input') as HTMLInputElement;
-            }
-
-            console.log('Found input:', nameInput);
-            if (nameInput) {
-                nameInput.focus();
-                nameInput.select();
-                console.log('Focused organization name input');
-            } else {
-                console.log('Could not find organization name input');
-            }
-        }, 100);
-    });
-
     async function createOrganization() {
         isLoading = true;
         let organization = null;
diff --git a/src/routes/(console)/onboarding/create-project/+page.svelte b/src/routes/(console)/onboarding/create-project/+page.svelte
index f9f2a4fb5..5121889d6 100644
--- a/src/routes/(console)/onboarding/create-project/+page.svelte
+++ b/src/routes/(console)/onboarding/create-project/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
     import { Card, Layout, Button } from '@appwrite.io/pink-svelte';
     import { isCloud } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
@@ -23,29 +22,6 @@
 
     export let data;
 
-    onMount(() => {
-        setTimeout(() => {
-            let nameInput = document.querySelector(
-                'input[placeholder="Project name"]'
-            ) as HTMLInputElement;
-            if (!nameInput) {
-                nameInput = document.querySelector('input[type="text"]') as HTMLInputElement;
-            }
-            if (!nameInput) {
-                nameInput = document.querySelector('input') as HTMLInputElement;
-            }
-
-            console.log('Found input:', nameInput);
-            if (nameInput) {
-                nameInput.focus();
-                nameInput.select();
-                console.log('Focused project name input');
-            } else {
-                console.log('Could not find project name input');
-            }
-        }, 100);
-    });
-
     function markOnboardingComplete() {
         const currentPrefs = data.accountPrefs ?? $user.prefs;
 
diff --git a/src/routes/(console)/organization-[organization]/createMember.svelte b/src/routes/(console)/organization-[organization]/createMember.svelte
index 9ab8334de..2ea47fb3d 100644
--- a/src/routes/(console)/organization-[organization]/createMember.svelte
+++ b/src/routes/(console)/organization-[organization]/createMember.svelte
@@ -26,6 +26,7 @@
         name: string,
         error: string,
         role: string = isSelfHosted ? 'owner' : 'developer';
+        emailInput: HTMLInputElement;
 
     async function create() {
         try {
@@ -70,7 +71,7 @@
         id="email"
         label="Email"
         placeholder="Enter email"
-        autofocus={true}
+        autofocus
         bind:value={email} />
     <InputText id="member-name" label="Name" placeholder="Enter name" bind:value={name} />
     {#if isCloud}
diff --git a/src/routes/(console)/organization-[organization]/members/+page.svelte b/src/routes/(console)/organization-[organization]/members/+page.svelte
index ce1d59ec8..c906ece51 100644
--- a/src/routes/(console)/organization-[organization]/members/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/members/+page.svelte
@@ -73,7 +73,7 @@
         <ConsoleButton
             size="s"
             event="create_user"
-            on:mousedown={() => newMemberModal.set(true)}
+            on:click={() => newMemberModal.set(true)}
             disabled={isCloud ? !$currentPlan?.addons?.seats?.supported : false}>
             <Icon size="s" icon={IconPlus} slot="start" />
             <span class="text">Invite</span>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte b/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
index ac687b508..201e85353 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
@@ -56,7 +56,7 @@
 </script>
 
 <Modal title="Create user" {error} bind:show={showCreate} onSubmit={create}>
-    <InputText id="name" label="Name" placeholder="Enter name" autofocus={true} bind:value={name} />
+    <InputText autofocus id="name" label="Name" placeholder="Enter name" bind:value={name} />
     <InputEmail id="email" label="Email" placeholder="Enter email" bind:value={mail} />
     <InputPhone id="phone" label="Phone" placeholder="Enter phone" bind:value={phone} />
     <InputPassword id="password" label="Password" placeholder="Enter password" bind:value={pass} />
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/createMembership.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/createMembership.svelte
index ab227bb65..35fb78e81 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/createMembership.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/createMembership.svelte
@@ -52,7 +52,7 @@
         label="Email"
         placeholder="Enter email"
         required={true}
-        autofocus={true}
+        autofocus
         bind:value={email} />
     <InputText id="name" label="Name" placeholder="Enter name" bind:value={name} />
     <Alert.Inline status="info">

From b26833ec89bfdf83dce8fd8004eec47414418518 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 30 Jun 2025 11:45:20 +0530
Subject: [PATCH 3/7] fix:added autofocus to all components that need it

---
 src/lib/components/feedback/feedbackGeneral.svelte           | 2 +-
 .../organization-[organization]/createMember.svelte          | 2 +-
 .../(console)/project-[region]-[project]/auth/+page.svelte   | 4 ++--
 .../project-[region]-[project]/auth/createUser.svelte        | 2 +-
 .../messaging/create-[type]/(type)/email.svelte              | 1 +
 .../messaging/create-[type]/(type)/push.svelte               | 1 +
 .../messaging/create-[type]/(type)/sms.svelte                | 1 +
 .../project-[region]-[project]/storage/+page.svelte          | 5 +----
 .../project-[region]-[project]/storage/create.svelte         | 2 +-
 9 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/feedback/feedbackGeneral.svelte b/src/lib/components/feedback/feedbackGeneral.svelte
index a74ff90be..14b5d2701 100644
--- a/src/lib/components/feedback/feedbackGeneral.svelte
+++ b/src/lib/components/feedback/feedbackGeneral.svelte
@@ -16,7 +16,7 @@
 <InputTextarea
     required
     id="feedback"
-    autofocus
+    autofocus={true}
     bind:value={$feedbackData.message}
     label="Tell us more about your experience"
     placeholder="Share your suggestions and feature requests..." />
diff --git a/src/routes/(console)/organization-[organization]/createMember.svelte b/src/routes/(console)/organization-[organization]/createMember.svelte
index 2ea47fb3d..b107cf90c 100644
--- a/src/routes/(console)/organization-[organization]/createMember.svelte
+++ b/src/routes/(console)/organization-[organization]/createMember.svelte
@@ -26,7 +26,7 @@
         name: string,
         error: string,
         role: string = isSelfHosted ? 'owner' : 'developer';
-        emailInput: HTMLInputElement;
+    emailInput: HTMLInputElement;
 
     async function create() {
         try {
diff --git a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
index aa4f5702c..1f2dc4423 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
@@ -60,7 +60,7 @@
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector view={View.Table} {columns} hideView />
-            <Button on:mousedown={() => ($showCreateUser = true)} event="create_user" size="s">
+            <Button on:click={() => ($showCreateUser = true)} event="create_user" size="s">
                 <Icon size="s" icon={IconPlus} slot="start" />
                 <span class="text">Create user</span>
             </Button>
@@ -173,7 +173,7 @@
             href="https://appwrite.io/docs/references/cloud/server-nodejs/users"
             target="user"
             allowCreate={$canWriteUsers}
-            on:mousedown={() => showCreateUser.set(true)} />
+            on:click={() => showCreateUser.set(true)} />
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte b/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
index 201e85353..982c5c7e1 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
@@ -56,7 +56,7 @@
 </script>
 
 <Modal title="Create user" {error} bind:show={showCreate} onSubmit={create}>
-    <InputText autofocus id="name" label="Name" placeholder="Enter name" bind:value={name} />
+    <InputText autofocus={true} id="name" label="Name" placeholder="Enter name" bind:value={name} />
     <InputEmail id="email" label="Email" placeholder="Enter email" bind:value={mail} />
     <InputPhone id="phone" label="Phone" placeholder="Enter phone" bind:value={phone} />
     <InputPassword id="password" label="Password" placeholder="Enter password" bind:value={pass} />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
index 352715d43..529265b67 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
@@ -106,6 +106,7 @@
                         id="subject"
                         label="Subject"
                         required
+                        autofocus={true}
                         placeholder="Enter subject"
                         bind:value={subject}>
                     </InputText>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
index 82d12a36f..ad9af669c 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
@@ -116,6 +116,7 @@
                         id="title"
                         label="Title"
                         required
+                        autofocus={true}
                         placeholder="Enter title"
                         bind:value={title}>
                     </InputText>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
index e71f479f8..d2fe11dd3 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
@@ -96,6 +96,7 @@
                         id="message"
                         label="Message"
                         required
+                        autofocus={true}
                         maxlength={900}
                         placeholder="Type here..."
                         bind:value={content}>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
index 9d780c407..7bbac81ce 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
@@ -44,10 +44,7 @@
                 hideColumns={!data.buckets.total}
                 hideView={!data.buckets.total} />
             {#if $canWriteBuckets}
-                <Button
-                    on:mousedown={() => ($showCreateBucket = true)}
-                    event="create_bucket"
-                    size="s">
+                <Button on:click={() => ($showCreateBucket = true)} event="create_bucket" size="s">
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create bucket
                 </Button>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/create.svelte b/src/routes/(console)/project-[region]-[project]/storage/create.svelte
index fcb3ca65f..55f73bd22 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/create.svelte
@@ -55,7 +55,7 @@
         label="Name"
         placeholder="New bucket"
         bind:value={name}
-        autofocus
+        autofocus={true}
         required />
 
     {#if !showCustomId}

From 27f89eff56dde433943f84c9c9082f179df34d40 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 30 Jun 2025 13:09:01 +0530
Subject: [PATCH 4/7] fix:removed onMount

---
 .../feedback/feedbackGeneral.svelte           | 12 +------
 src/lib/components/navbar.svelte              | 32 ++++++++++---------
 src/lib/components/sidebar.svelte             | 10 ++++--
 .../auth/createUser.svelte                    |  2 +-
 .../create-[type]/(type)/push.svelte          |  2 +-
 .../messaging/create-[type]/(type)/sms.svelte |  2 +-
 .../storage/create.svelte                     |  2 +-
 7 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/feedback/feedbackGeneral.svelte b/src/lib/components/feedback/feedbackGeneral.svelte
index 14b5d2701..021fa4661 100644
--- a/src/lib/components/feedback/feedbackGeneral.svelte
+++ b/src/lib/components/feedback/feedbackGeneral.svelte
@@ -1,22 +1,12 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
     import { InputTextarea } from '$lib/elements/forms';
     import { feedbackData } from '$lib/stores/feedback';
-
-    onMount(() => {
-        setTimeout(() => {
-            const textarea = document.getElementById('feedback') as HTMLTextAreaElement;
-            if (textarea) {
-                textarea.focus();
-            }
-        }, 150);
-    });
 </script>
 
 <InputTextarea
     required
     id="feedback"
-    autofocus={true}
+    autofocus
     bind:value={$feedbackData.message}
     label="Tell us more about your experience"
     placeholder="Share your suggestions and feature requests..." />
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index b1932715e..c87845b4e 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -51,7 +51,7 @@
     import { base } from '$app/paths';
     import { logout } from '$lib/helpers/logout';
     import { app } from '$lib/stores/app';
-    import { isTabletViewport } from '$lib/stores/viewport';
+    import { isTabletViewport, isSmallViewport } from '$lib/stores/viewport';
     import { isCloud } from '$lib/system.js';
     import { user } from '$lib/stores/user';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -166,20 +166,22 @@
                         >Upgrade</Button.Anchor>
                 {/if}
 
-                <DropList show={$feedback.show} class="extended-width">
-                    <Button.Button
-                        type="button"
-                        variant="compact"
-                        on:click={() => {
-                            toggleFeedback();
-                            trackEvent(Click.FeedbackSubmitClick, { source: 'top_nav' });
-                        }}
-                        >Feedback
-                    </Button.Button>
-                    <svelte:fragment slot="other">
-                        <Feedback />
-                    </svelte:fragment>
-                </DropList>
+                {#if !$isSmallViewport}
+                    <DropList show={$feedback.show} class="extended-width">
+                        <Button.Button
+                            type="button"
+                            variant="compact"
+                            on:click={() => {
+                                toggleFeedback();
+                                trackEvent(Click.FeedbackSubmitClick, { source: 'top_nav' });
+                            }}
+                            >Feedback
+                        </Button.Button>
+                        <svelte:fragment slot="other">
+                            <Feedback />
+                        </svelte:fragment>
+                    </DropList>
+                {/if}
                 <DropList
                     noArrow
                     scrollable
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index ef1157831..5019b139f 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -35,7 +35,7 @@
     import MobileSupportModal from '$routes/(console)/wizard/support/mobileSupportModal.svelte';
     import MobileFeedbackModal from '$routes/(console)/wizard/feedback/mobileFeedbackModal.svelte';
     import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
-    import { isTabletViewport } from '$lib/stores/viewport';
+    import { isTabletViewport, isSmallViewport } from '$lib/stores/viewport';
     import { Click, trackEvent } from '$lib/actions/analytics';
 
     import type { HTMLAttributes } from 'svelte/elements';
@@ -269,7 +269,9 @@
                                 >Feedback
                             </Button.Button>
                             <svelte:fragment slot="other">
-                                <MobileFeedbackModal />
+                                {#if $isSmallViewport}
+                                    <MobileFeedbackModal />
+                                {/if}
                             </svelte:fragment>
                         </DropList>
 
@@ -329,7 +331,9 @@
                                     ><span>Feedback</span>
                                 </Button.Button>
                                 <svelte:fragment slot="other">
-                                    <MobileFeedbackModal />
+                                    {#if $isSmallViewport}
+                                        <MobileFeedbackModal />
+                                    {/if}
                                 </svelte:fragment>
                             </DropList>
 
diff --git a/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte b/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
index 982c5c7e1..201e85353 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
@@ -56,7 +56,7 @@
 </script>
 
 <Modal title="Create user" {error} bind:show={showCreate} onSubmit={create}>
-    <InputText autofocus={true} id="name" label="Name" placeholder="Enter name" bind:value={name} />
+    <InputText autofocus id="name" label="Name" placeholder="Enter name" bind:value={name} />
     <InputEmail id="email" label="Email" placeholder="Enter email" bind:value={mail} />
     <InputPhone id="phone" label="Phone" placeholder="Enter phone" bind:value={phone} />
     <InputPassword id="password" label="Password" placeholder="Enter password" bind:value={pass} />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
index ad9af669c..41e481f95 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
@@ -116,7 +116,7 @@
                         id="title"
                         label="Title"
                         required
-                        autofocus={true}
+                        autofocus
                         placeholder="Enter title"
                         bind:value={title}>
                     </InputText>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
index d2fe11dd3..ebb0859a6 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
@@ -96,7 +96,7 @@
                         id="message"
                         label="Message"
                         required
-                        autofocus={true}
+                        autofocus
                         maxlength={900}
                         placeholder="Type here..."
                         bind:value={content}>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/create.svelte b/src/routes/(console)/project-[region]-[project]/storage/create.svelte
index 55f73bd22..fcb3ca65f 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/create.svelte
@@ -55,7 +55,7 @@
         label="Name"
         placeholder="New bucket"
         bind:value={name}
-        autofocus={true}
+        autofocus
         required />
 
     {#if !showCustomId}

From afb5d16e0d459ee08f7ce7c65f51b69b44d3d17c Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 30 Jun 2025 14:26:02 +0530
Subject: [PATCH 5/7] fix: resolved minor issue and removed a unused element to
 solve lint error caught during check

---
 src/lib/components/sidebar.svelte             | 25 ++++---------------
 .../createMember.svelte                       |  1 -
 2 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 5019b139f..2285d4b12 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -268,11 +268,6 @@
                                 }}
                                 >Feedback
                             </Button.Button>
-                            <svelte:fragment slot="other">
-                                {#if $isSmallViewport}
-                                    <MobileFeedbackModal />
-                                {/if}
-                            </svelte:fragment>
                         </DropList>
 
                         <DropList show={$showSupportModal} scrollable>
@@ -284,11 +279,6 @@
                                     trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
                                 }}>
                                 <span>Support</span>
-
-                                <svelte:fragment slot="other">
-                                    <MobileSupportModal bind:show={$showSupportModal}
-                                    ></MobileSupportModal>
-                                </svelte:fragment>
                             </Button.Button>
                         </DropList>
                     </Layout.Stack>
@@ -330,11 +320,6 @@
                                     }}
                                     ><span>Feedback</span>
                                 </Button.Button>
-                                <svelte:fragment slot="other">
-                                    {#if $isSmallViewport}
-                                        <MobileFeedbackModal />
-                                    {/if}
-                                </svelte:fragment>
                             </DropList>
 
                             <DropList show={$showSupportModal} scrollable>
@@ -346,11 +331,6 @@
                                         trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
                                     }}>
                                     <span>Support</span>
-
-                                    <svelte:fragment slot="other">
-                                        <MobileSupportModal bind:show={$showSupportModal}
-                                        ></MobileSupportModal>
-                                    </svelte:fragment>
                                 </Button.Button>
                             </DropList>
                         </Layout.Stack>
@@ -361,6 +341,11 @@
     </Sidebar.Base>
 </div>
 
+{#if $isSmallViewport}
+    <MobileFeedbackModal />
+    <MobileSupportModal bind:show={$showSupportModal} />
+{/if}
+
 {#if subNavigation}
     <div class="sub-navigation" class:icons={state === 'icons'}>
         <svelte:component this={subNavigation} />
diff --git a/src/routes/(console)/organization-[organization]/createMember.svelte b/src/routes/(console)/organization-[organization]/createMember.svelte
index b107cf90c..5269183e7 100644
--- a/src/routes/(console)/organization-[organization]/createMember.svelte
+++ b/src/routes/(console)/organization-[organization]/createMember.svelte
@@ -26,7 +26,6 @@
         name: string,
         error: string,
         role: string = isSelfHosted ? 'owner' : 'developer';
-    emailInput: HTMLInputElement;
 
     async function create() {
         try {

From e8e09babe3b5f18f23424d7ae1ae1a148f2c9106 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 30 Jun 2025 17:08:35 +0530
Subject: [PATCH 6/7] fix: resolved a minor issue in sidebar

---
 src/lib/components/sidebar.svelte | 57 +++++++++++++++----------------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 2285d4b12..bf7a559b7 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -255,7 +255,8 @@
                         </Tooltip>
                     </div>
                 </Layout.Stack>
-            {:else}
+            {/if}
+            {#if $isSmallViewport}
                 <div class="action-buttons">
                     <Layout.Stack direction="column" gap="s">
                         <DropList show={$feedback.show} scrollable>
@@ -306,35 +307,33 @@
                 </div>
             {/if}
 
-            {#if project}
-                <div class="only-mobile">
-                    <div class="action-buttons">
-                        <Layout.Stack direction="column" gap="s">
-                            <DropList show={$feedback.show} scrollable>
-                                <Button.Button
-                                    variant="secondary"
-                                    size="s"
-                                    on:click={() => {
-                                        toggleFeedback();
-                                        trackEvent('click_menu_feedback', { source: 'side_nav' });
-                                    }}
-                                    ><span>Feedback</span>
-                                </Button.Button>
-                            </DropList>
+            {#if project && $isSmallViewport}
+                <div class="action-buttons">
+                    <Layout.Stack direction="column" gap="s">
+                        <DropList show={$feedback.show} scrollable>
+                            <Button.Button
+                                variant="secondary"
+                                size="s"
+                                on:click={() => {
+                                    toggleFeedback();
+                                    trackEvent('click_menu_feedback', { source: 'side_nav' });
+                                }}
+                                ><span>Feedback</span>
+                            </Button.Button>
+                        </DropList>
 
-                            <DropList show={$showSupportModal} scrollable>
-                                <Button.Button
-                                    variant="secondary"
-                                    size="s"
-                                    on:click={() => {
-                                        $showSupportModal = true;
-                                        trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
-                                    }}>
-                                    <span>Support</span>
-                                </Button.Button>
-                            </DropList>
-                        </Layout.Stack>
-                    </div>
+                        <DropList show={$showSupportModal} scrollable>
+                            <Button.Button
+                                variant="secondary"
+                                size="s"
+                                on:click={() => {
+                                    $showSupportModal = true;
+                                    trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
+                                }}>
+                                <span>Support</span>
+                            </Button.Button>
+                        </DropList>
+                    </Layout.Stack>
                 </div>
             {/if}
         </div>

From 58b63960fb9e94b9803e8ff2374cff5b7085ee19 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 30 Jun 2025 18:34:42 +0530
Subject: [PATCH 7/7] fix: added else if condition instead of if

---
 src/lib/components/sidebar.svelte | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index bf7a559b7..59e049f60 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -255,8 +255,7 @@
                         </Tooltip>
                     </div>
                 </Layout.Stack>
-            {/if}
-            {#if $isSmallViewport}
+            {:else if $isSmallViewport}
                 <div class="action-buttons">
                     <Layout.Stack direction="column" gap="s">
                         <DropList show={$feedback.show} scrollable>
@@ -269,6 +268,9 @@
                                 }}
                                 >Feedback
                             </Button.Button>
+                            <svelte:fragment slot="other">
+                                <MobileFeedbackModal />
+                            </svelte:fragment>
                         </DropList>
 
                         <DropList show={$showSupportModal} scrollable>
@@ -280,6 +282,10 @@
                                     trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
                                 }}>
                                 <span>Support</span>
+                                <svelte:fragment slot="other">
+                                    <MobileSupportModal bind:show={$showSupportModal}
+                                    ></MobileSupportModal>
+                                </svelte:fragment>
                             </Button.Button>
                         </DropList>
                     </Layout.Stack>
@@ -340,11 +346,6 @@
     </Sidebar.Base>
 </div>
 
-{#if $isSmallViewport}
-    <MobileFeedbackModal />
-    <MobileSupportModal bind:show={$showSupportModal} />
-{/if}
-
 {#if subNavigation}
     <div class="sub-navigation" class:icons={state === 'icons'}>
         <svelte:component this={subNavigation} />