Skip to content

Feat: Add mobile breakpoint blocker screen #2726

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HarshMN2345 wants to merge 3 commits into
base: feat-profiles
Choose a base branch
from
Open

Feat: Add mobile breakpoint blocker screen #2726

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aace99e
first design
HarshMN2345 Dec 20, 2025
3b3133d
Update mobileMessage.svelte
HarshMN2345 Dec 23, 2025
6a0b9ac
addressed some comments
HarshMN2345 Dec 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions src/lib/studio/mobileMessage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<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}
Comment thread
HarshMN2345 marked this conversation as resolved.
Outdated
<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>
</Layout.Stack>
</Card.Base>
</div>
</div>
{/if}

<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);
}

.mobile-studio-modal {
width: 100%;
max-width: 480px;
}

.studio-alert-wrapper {
margin-block-start: var(--space-2, 4px);
width: 100%;
}
Comment thread
HarshMN2345 marked this conversation as resolved.
Outdated

/* Prevent background scroll when mobile message is shown */
:global(html:has(.mobile-studio-scrim)) {
Copy link
Copy Markdown
Contributor

@ItzNotABug ItzNotABug Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there no other way 🫠?
maybe we can add a check on main selector at root level layout.

Copy link
Copy Markdown
Member Author

@HarshMN2345 HarshMN2345 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have also been using this class in verification block 👍 and since this is temporary do we really need it to be added in main root layout?

Copy link
Copy Markdown
Contributor

@TorstenDittmann TorstenDittmann Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does it need to be static though? if its not static we can just scroll 👍🏻

height: 100%;
overflow: hidden !important;
}
</style>
34 changes: 22 additions & 12 deletions src/routes/(console)/project-[region]-[project]/(studio)/studio/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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 {
Expand Down
Loading