Feat: Add mobile breakpoint blocker screen

src/lib/studio/mobileMessage.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { Card, Layout, Typography, Icon, Alert } from '@appwrite.io/pink-svelte';
+    import { IconDeviceMobile, IconDesktopComputer } from '@appwrite.io/pink-icons-svelte';
+</script>
+
+<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>
+                <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>
+</div>
+
+<style>
+    .mobile-studio-scrim {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: hsl(240 5% 8% / 0.6);
+        backdrop-filter: blur(4px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+        padding: var(--space-6, 12px);
+    }
+
+    .studio-alert-wrapper {
+        margin-block-start: var(--space-2, 4px);
+        width: 100%;
+    }
+
+    /* Prevent background scroll when mobile message is shown */
+    :global(html:has(.mobile-studio-scrim)) {
+        height: 100%;
+        overflow: hidden !important;
+    }
+</style>

src/routes/(console)/project-[region]-[project]/(studio)/studio/+page.svelte

@@ -9,6 +9,8 @@
     import { getPageTitle } from '../../store';
     import { resolvedProfile } from '$lib/profiles/index.svelte';
     import type { PageProps } from './$types';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import MobileMessage from '$lib/studio/mobileMessage.svelte';
 
     let { params, data }: PageProps = $props();
     let anchor: HTMLElement = $state();
@@ -19,32 +21,40 @@
     }
 
     onMount(async () => {
-        ensureStudioComponent();
-        await tick();
-        positionStudio();
-        navigateToRoute({
-            id: 'project',
-            props: {
-                projectId: params.project,
-                region: params.region
-            }
-        });
+        if (!$isSmallViewport) {
+            ensureStudioComponent();
+            await tick();
+            positionStudio();
+            navigateToRoute({
+                id: 'project',
+                props: {
+                    projectId: params.project,
+                    region: params.region
+                }
+            });
+        }
     });
 
     onDestroy(() => {
         hideStudio();
     });
 
     $effect(() => {
-        positionStudio();
+        if (!$isSmallViewport && anchor) {
+            positionStudio();
+        }
     });
 </script>
 
 <svelte:head>
     <title>{getPageTitle(data.project.name, 'Studio', resolvedProfile.platform)}</title>
 </svelte:head>
 
-<div class="studio-page" bind:this={anchor}></div>
+{#if $isSmallViewport}
+    <MobileMessage />
+{:else}
+    <div class="studio-page" bind:this={anchor}></div>
+{/if}
 
 <style>
     .studio-page {