Fix ipad issue vertical scroll

src/lib/components/studio/chat/chat.svelte

@@ -125,7 +125,7 @@
 <section
     class="chat"
     style:visibility={$showChat ? 'visible' : 'hidden'}
-    style:width={$isSmallViewport ? 'calc(100vw - 16px)' : $showChat ? `${width}px` : 0}
+    style:width={$isSmallViewport ? 'calc(100dvw - 16px)' : $showChat ? `${width}px` : 0}
     class:minimize-chat={minimizeChat}
     class:is-visible={$showChat}
     class:sub-navigation={hasSubNavigation}>
@@ -198,18 +198,18 @@
         width: 0;
         position: absolute;
         top: 0;
-        height: calc(100vh - 56px);
+        height: calc(100dvh - 56px);
         z-index: 2;
 
         @media (min-width: 768px) {
             top: 0;
-            height: calc(100vh - 70px);
+            height: calc(100dvh - 70px);
         }
 
         &.sub-navigation {
             @media (max-width: 1024px) {
                 top: 40px;
-                height: calc(100vh - 96px);
+                height: calc(100dvh - 96px);
             }
         }
     }

src/lib/components/studio/chatWrapper.svelte

@@ -175,7 +175,7 @@
         cursor: col-resize;
         margin-inline: 10px;
         position: absolute;
-        height: calc(100vh - 66px);
+        height: calc(100dvh - 66px);
         margin-block-start: calc(-1 * var(--base-8));
         margin-inline-start: 0;
         z-index: 1;

src/lib/layout/shellStudio.svelte

@@ -276,7 +276,7 @@
                                 <div
                                     style:padding-left="200px"
                                     style:width="100%"
-                                    style:min-height="calc(100vh - 98px)">
+                                    style:min-height="calc(100dvh - 98px)">
                                     <Layout.Stack>
                                         {#if page.data?.header}
                                             <Header />
@@ -380,7 +380,7 @@
 
 <style lang="scss">
     main {
-        min-height: 100vh;
+        min-height: 100dvh;
         background-color: var(--bgcolor-neutral-default);
     }
 
@@ -408,14 +408,14 @@
     }
 
     .studio-content {
-        min-height: calc(100vh - 50px);
+        min-height: calc(100dvh - 50px);
         margin-top: 50px;
-        width: 100vw;
+        width: 100dvw;
         position: relative;
 
         @media (min-width: 1024px) {
-            min-height: calc(100vh - 48px);
-            width: calc(100vw - 200px);
+            min-height: calc(100dvh - 48px);
+            width: calc(100dvw - 200px);
             margin-left: 200px;
             margin-top: 48px;
             padding-left: 0;
@@ -424,7 +424,7 @@
 
         &.project-sidebar {
             @media (min-width: 1024px) {
-                width: calc(100vw - 48px);
+                width: calc(100dvw - 48px);
                 margin-left: 48px;
             }
         }
@@ -447,8 +447,8 @@
 
     .overlay {
         background-color: rgba(0, 0, 0, 0.4);
-        width: 100vw;
-        height: 100vh;
+        width: 100dvw;
+        height: 100dvh;
         position: fixed;
         top: 0;
         left: 0;
@@ -495,8 +495,8 @@
         position: absolute;
         left: 0;
         top: 0;
-        width: 100vw;
-        height: 100vh;
+        width: 100dvw;
+        height: 100dvh;
         background-color: transparent;
     }
 

src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte

@@ -165,7 +165,7 @@
 <div bind:this={layoutElement} class="layout">
     <Layout.Stack
         direction="column"
-        height={$isSmallViewport ? 'calc(100vh - 119px)' : 'calc(100vh - 79px)'}
+        height={$isSmallViewport ? 'calc(100dvh - 119px)' : 'calc(100dvh - 79px)'}
         gap="none">
         <Layout.Stack direction="column" gap="none">
             {#if $isSmallViewport}