From cd3549133750cc1e3370e182a2b8bbc885ffcdf8 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 12 May 2025 14:33:52 +0200
Subject: [PATCH] Fix: mobile studio layout

---
 src/lib/components/studio/chat/chat.svelte    | 15 +++--
 src/lib/layout/shellStudio.svelte             | 43 +++++++------
 .../studio/artifact-[artifact]/+layout.svelte | 63 +++++++++++++------
 .../studio/artifact-[artifact]/+page.svelte   | 17 +++--
 4 files changed, 88 insertions(+), 50 deletions(-)

diff --git a/src/lib/components/studio/chat/chat.svelte b/src/lib/components/studio/chat/chat.svelte
index b557f9098..68a8b4a73 100644
--- a/src/lib/components/studio/chat/chat.svelte
+++ b/src/lib/components/studio/chat/chat.svelte
@@ -188,8 +188,8 @@
     }
     .chat.minimize-chat {
         top: auto;
-        bottom: var(--space-4);
-        height: 68px;
+        bottom: 0;
+        height: auto;
     }
 
     .chat-placeholder {
@@ -208,18 +208,18 @@
             '.'
             '.';
         height: calc(100% - var(--space-4));
-        width: 100%;
+        width: calc(100% + var(--space-7));
 
         background-color: var(--bgcolor-neutral-primary);
         border: 1px solid var(--border-neutral);
-        border-radius: var(--border-radius-m);
+
         padding-inline: var(--space-4);
 
         @media (min-width: 768px) {
+            width: 100%;
             height: 100%;
             background-color: transparent;
             border: 0;
-            border-radius: 0;
         }
     }
 
@@ -250,7 +250,6 @@
     .input {
         border: 1px solid var(--border-neutral);
         border-radius: var(--border-radius-m);
-        margin-block-end: var(--space-4);
         padding: var(--space-6);
 
         textarea {
@@ -258,6 +257,10 @@
             min-height: 100px;
             resize: none;
         }
+
+        @media (min-width: 768px) {
+            margin-block-end: var(--space-4);
+        }
     }
 
     .input.minimize-chat {
diff --git a/src/lib/layout/shellStudio.svelte b/src/lib/layout/shellStudio.svelte
index be4bf12b6..17fb00dee 100644
--- a/src/lib/layout/shellStudio.svelte
+++ b/src/lib/layout/shellStudio.svelte
@@ -249,7 +249,10 @@
 
 <main>
     <Layout.Stack>
-        <header>
+        <header
+            style:background-color={$isSmallViewport
+                ? 'var(--bgcolor-neutral-primary)'
+                : 'var(--bgcolor-neutral-default)'}>
             <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
                 <Layout.Stack direction="row" alignItems="center" gap="none">
                     <div class="only-mobile-tablet">
@@ -267,18 +270,20 @@
                     </div>
                     <Breadcrumbs {organizations} />
                 </Layout.Stack>
-                <Link.Button
-                    on:click={() => {
-                        showAccountMenu = !showAccountMenu;
-                        shouldAnimateThemeToggle = false;
-                        if (showAccountMenu) {
-                            trackEvent(Click.MenuDropDownClick);
-                        }
-                    }}>
-                    <div style:user-select="none">
-                        <AvatarInitials name={$user?.name ?? ''} size="s" />
-                    </div>
-                </Link.Button>
+                <Layout.Stack inline height="32px">
+                    <Link.Button
+                        on:click={() => {
+                            showAccountMenu = !showAccountMenu;
+                            shouldAnimateThemeToggle = false;
+                            if (showAccountMenu) {
+                                trackEvent(Click.MenuDropDownClick);
+                            }
+                        }}>
+                        <div style:user-select="none" style:width="32px">
+                            <AvatarInitials name={$user?.name ?? ''} size="s" />
+                        </div>
+                    </Link.Button>
+                </Layout.Stack>
 
                 {#if showAccountMenu}
                     <div class="account-container">
@@ -364,7 +369,7 @@
                 {#if hasProjectSidebar}
                     <Chat {parser} width={chatWidth} hasSubNavigation={page.data?.subNavigation} />
                 {/if}
-                <Card.Base>
+                <Card.Base padding="xxs" radius={$isSmallViewport ? 'none' : 'm'}>
                     <Layout.Stack>
                         {#if page.data?.subNavigation}
                             {@const Component = page.data.subNavigation}
@@ -512,7 +517,6 @@
         width: 100%;
         padding: var(--space-4);
         z-index: 10;
-        background-color: var(--bgcolor-neutral-default);
     }
 
     .studio-wrapper {
@@ -520,19 +524,18 @@
     }
 
     .studio-content {
-        min-height: calc(100vh - 54px);
-        margin-top: 56px;
+        min-height: calc(100vh - 28px);
+        margin-top: 28px;
         width: 100vw;
         position: relative;
 
-        padding-right: var(--space-4);
-        padding-left: var(--space-4);
-
         @media (min-width: 1024px) {
+            min-height: calc(100vh - 54px);
             width: calc(100vw - 200px);
             margin-left: 200px;
             margin-top: 54px;
             padding-left: 0;
+            padding-right: var(--space-4);
         }
 
         &.project-sidebar {
diff --git a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte
index 8d3f01c45..73ebaac8e 100644
--- a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte
+++ b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte
@@ -151,9 +151,20 @@
 
 <Layout.Stack
     direction="column"
-    height={$isSmallViewport ? 'calc(100vh - 218px)' : 'calc(100vh - 88px)'}
+    height={$isSmallViewport ? 'calc(100vh - 163px)' : 'calc(100vh - 88px)'}
     gap="none">
     <Layout.Stack direction="column" gap="none">
+        {#if $isSmallViewport}
+            <Layout.Stack direction="row" gap="none" justifyContent="center">
+                <div style:margin-block-start="4px">
+                    <ActionMenu.Item.Button trailingIcon={IconChevronDown}
+                        >Dashboard</ActionMenu.Item.Button>
+                </div>
+            </Layout.Stack>
+            <div class="divider-wrapper-artifacts">
+                <Divider />
+            </div>
+        {/if}
         <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
             <Layout.Stack gap="xxs" direction="row" alignItems="center" inline>
                 {#if !$showChat}
@@ -176,21 +187,21 @@
                     {/each}
                 </Tabs>
             </Layout.Stack>
-
-            <ActionMenu.Item.Button trailingIcon={IconChevronDown}
-                >Dashboard</ActionMenu.Item.Button>
             {#if !$isSmallViewport}
-                <Layout.Stack gap="xxs" direction="row" alignItems="center" inline>
-                    <InputSelect
-                        id="artificat-version"
-                        options={[
-                            { value: '0.2', label: 'v0.2' },
-                            { value: '0.1', label: 'v0.1' }
-                        ]}
-                        value="0.2" />
-                    <Button.Button size="s" variant="primary">Release</Button.Button>
-                </Layout.Stack>
+                <ActionMenu.Item.Button trailingIcon={IconChevronDown}
+                    >Dashboard</ActionMenu.Item.Button>
             {/if}
+
+            <Layout.Stack gap="xxs" direction="row" alignItems="center" inline>
+                <InputSelect
+                    id="artificat-version"
+                    options={[
+                        { value: '0.2', label: 'v0.2' },
+                        { value: '0.1', label: 'v0.1' }
+                    ]}
+                    value="0.2" />
+                <Button.Button size="s" variant="primary">Release</Button.Button>
+            </Layout.Stack>
         </Layout.Stack>
         <div class="divider-wrapper">
             <Divider />
@@ -250,20 +261,20 @@
     aside {
         background-color: var(--bgcolor-neutral-default);
 
-        margin-inline-start: -25px;
+        margin-inline-start: -9px;
         margin-block-end: calc(-1 * var(--base-8));
         padding: var(--space-3);
-        border-bottom-right-radius: var(--border-radius-m);
 
         border: 1px solid var(--border-neutral);
-        width: calc(100% - var(--space-7));
+        width: 100%;
 
         position: fixed;
-        bottom: 116px;
+        bottom: 67px;
 
         @media (min-width: 768px) {
             width: calc(100% + 2 * var(--space-7));
             margin-inline-start: calc(-1 * var(--space-7));
+            border-bottom-right-radius: var(--border-radius-m);
             position: static;
             border: 0;
         }
@@ -276,10 +287,22 @@
         cursor: row-resize;
     }
 
+    .divider-wrapper-artifacts {
+        margin-block-start: 12px;
+        margin-block-end: 8px;
+        margin-inline-start: calc(-1 * var(--space-4));
+        width: calc(100% + var(--space-7));
+    }
+
     .divider-wrapper {
         margin-block-start: 7.5px;
-        margin-inline-start: calc(-1 * var(--space-7));
         margin-block-end: 8px;
-        width: calc(100% + var(--space-10));
+        margin-inline-start: calc(-1 * var(--space-4));
+        width: calc(100% + var(--space-7));
+
+        @media (min-width: 768px) {
+            margin-inline-start: calc(-1 * var(--space-7));
+            width: calc(100% + var(--space-10));
+        }
     }
 </style>
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 98a4e3da8..0f76a707b 100644
--- a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+page.svelte
+++ b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+page.svelte
@@ -70,13 +70,22 @@
     }
     iframe {
         border: none;
-        width: calc(100% + 2 * var(--space-7));
         height: 100%;
-        margin-inline-start: calc(-1 * var(--space-7));
+
+        margin-inline-start: calc(-1 * var(--space-4));
+        width: calc(100% + var(--space-7));
+        @media (min-width: 768px) {
+            margin-inline-start: calc(-1 * var(--space-7));
+            width: calc(100% + 2 * var(--space-7));
+        }
     }
 
     .divider-wrapper {
-        margin-inline-start: calc(-1 * var(--space-7));
-        width: calc(100% + var(--space-10));
+        margin-inline-start: calc(-1 * var(--space-4));
+        width: calc(100% + var(--space-7));
+        @media (min-width: 768px) {
+            margin-inline-start: calc(-1 * var(--space-7));
+            width: calc(100% + var(--space-10));
+        }
     }
 </style>