From 0ad91d0803d9cdd0a12a13699be69023245e9f62 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Fri, 16 May 2025 12:35:24 +0200
Subject: [PATCH] Add mobile container

---
 .../studio/artifact-[artifact]/+page.svelte     | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+page.svelte b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+page.svelte
index 0f76a707b..225b1c624 100644
--- a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+page.svelte
+++ b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+page.svelte
@@ -27,6 +27,7 @@
     };
 
     let refresh = $state(false);
+    let showMobileDevice = $state(false);
 </script>
 
 <Layout.Stack direction="column" gap="s">
@@ -40,7 +41,14 @@
                 <Icon icon={IconRefresh} color="--fgcolor-neutral-tertiary" />
             </Button.Button>
             <InputText name="path" id="previewUrl" value={previewUrl.pathname} />
-            <Icon icon={IconDeviceMobile} color="--fgcolor-neutral-tertiary" />
+            <Button.Button
+                variant="extra-compact"
+                type="button"
+                onclick={() => {
+                    showMobileDevice = !showMobileDevice;
+                }}
+                size="s"
+                ><Icon icon={IconDeviceMobile} color="--fgcolor-neutral-tertiary" /></Button.Button>
             <Icon icon={IconExternalLink} color="--fgcolor-neutral-tertiary" />
         </Layout.Stack>
     </form>
@@ -48,7 +56,7 @@
         <Divider />
     </div>
 </Layout.Stack>
-<div class="iframe-container">
+<div class="iframe-container" class:mobile-container={showMobileDevice}>
     {#key refresh}
         <iframe
             src={previewUrl.toString()}
@@ -68,6 +76,11 @@
             height: auto;
         }
     }
+
+    .mobile-container {
+        width: 400px;
+        margin: 0 auto;
+    }
     iframe {
         border: none;
         height: 100%;