addressed some comments

Author: HarshMN2345

src/lib/studio/mobileMessage.svelte

@@ -1,37 +1,34 @@
 <script lang="ts">
     import { Card, Layout, Typography, Icon, Alert } from '@appwrite.io/pink-svelte';
     import { IconDeviceMobile, IconDesktopComputer } from '@appwrite.io/pink-icons-svelte';
-    import { isSmallViewport } from '$lib/stores/viewport';
 </script>
 
-{#if $isSmallViewport}
-    <div class="mobile-studio-scrim">
-        <div class="mobile-studio-modal">
-            <Card.Base variant="secondary" padding="l" radius="l">
-                <Layout.Stack gap="l" alignItems="center" justifyContent="center">
-                    <Icon icon={IconDesktopComputer} size="l" color="--fgcolor-neutral-primary" />
-                    <Layout.Stack gap="m" alignItems="center">
-                        <Typography.Title size="l" align="center">
-                            This experience works best on a larger screen.
-                        </Typography.Title>
-                        <Typography.Text align="center" color="--fgcolor-neutral-secondary">
-                            We’re working on making Imagine Studio fully responsive for mobile.
-For now, please use a tablet or desktop.
-                        </Typography.Text>
-                    </Layout.Stack>
-                    <div class="studio-alert-wrapper">
-                        <Alert.Inline status="info" title="Quick tip">
-                            <svelte:fragment slot="icon">
-                                <Icon icon={IconDeviceMobile} size="m" />
-                            </svelte:fragment>
-                            You can enable desktop mode in your mobile browser.
-                        </Alert.Inline>
-                    </div>
+<div class="mobile-studio-scrim">
+    <div style:width="100%" style:max-width="480px">
+        <Card.Base variant="secondary" padding="l" radius="l">
+            <Layout.Stack gap="l" alignItems="center" justifyContent="center">
+                <Icon icon={IconDesktopComputer} size="l" color="--fgcolor-neutral-primary" />
+                <Layout.Stack gap="m" alignItems="center">
+                    <Typography.Title size="l" align="center">
+                        This experience works best on a larger screen.
+                    </Typography.Title>
+                    <Typography.Text align="center" color="--fgcolor-neutral-secondary">
+                        We’re working on making Imagine Studio fully responsive for mobile. For now,
+                        please use a tablet or desktop.
+                    </Typography.Text>
                 </Layout.Stack>
-            </Card.Base>
-        </div>
+                <div class="studio-alert-wrapper">
+                    <Alert.Inline status="info" title="Quick tip">
+                        <svelte:fragment slot="icon">
+                            <Icon icon={IconDeviceMobile} size="m" />
+                        </svelte:fragment>
+                        You can enable desktop mode in your mobile browser.
+                    </Alert.Inline>
+                </div>
+            </Layout.Stack>
+        </Card.Base>
     </div>
-{/if}
+</div>
 
 <style>
     .mobile-studio-scrim {
@@ -49,11 +46,6 @@ For now, please use a tablet or desktop.
         padding: var(--space-6, 12px);
     }
 
-    .mobile-studio-modal {
-        width: 100%;
-        max-width: 480px;
-    }
-
     .studio-alert-wrapper {
         margin-block-start: var(--space-2, 4px);
         width: 100%;