fix: viewport on some mobile browsers

NamesMT · NamesMT · commit 9b244f4e46c2 · 2025-06-19T05:38:16.000Z
diff --git a/apps/frontend/app/components/chat/ChatInterface.vue b/apps/frontend/app/components/chat/ChatInterface.vue
@@ -418,7 +418,7 @@ function doScrollBottom({ smooth = true, maybe = false, tries = 0, lastScrollTop
 
 <template>
   <div class="relative overflow-hidden">
-    <VueLenis ref="lenisRef" class="h-screen overflow-y-scroll px-4">
+    <VueLenis ref="lenisRef" class="overflow-y-scroll px-4 h-dvh">
       <ChatInterfaceBackground v-bind="{ messages, isFetching }" />
       <div class="mx-auto h-full max-w-full lg:max-w-4xl">
         <div v-if="messages.length" class="relative z-2 space-y-4">
diff --git a/apps/frontend/app/components/chat/interface/ChatInterfaceBackground.vue b/apps/frontend/app/components/chat/interface/ChatInterfaceBackground.vue
@@ -20,7 +20,7 @@ const chatContext = useChatContext()
 
     <div
       v-show="!messages.length && !isFetching"
-      class="absolute left-0 z-0 h-screen w-full place-content-center overflow-hidden transition-height"
+      class="absolute left-0 z-0 w-full place-content-center overflow-hidden transition-height h-dvh"
     >
       <IUIMaybeGlassCard
         v-if="!messages.length"
diff --git a/apps/frontend/app/layouts/basic.vue b/apps/frontend/app/layouts/basic.vue
@@ -24,7 +24,7 @@ const title = computed(() => route.meta.title && t(route.meta.title))
       </Head>
 
       <Body>
-        <div class="min-h-screen w-full flex flex-col">
+        <div class="w-full flex flex-col min-h-dvh">
           <!-- NuxtPage -->
           <div id="app-body" class="flex grow">
             <slot />
diff --git a/apps/frontend/app/layouts/default.vue b/apps/frontend/app/layouts/default.vue
@@ -28,7 +28,7 @@ watch(() => route.name, () => { windowsScroll.measure() })
       </Head>
 
       <Body>
-        <div class="min-h-screen w-full flex flex-col">
+        <div class="w-full flex flex-col min-h-dvh">
           <!-- Header -->
           <DefaultHeader
             v-motion-slide-visible-once-left
diff --git a/apps/frontend/app/lib/shadcn/components/ui/toast/ToastViewport.vue b/apps/frontend/app/lib/shadcn/components/ui/toast/ToastViewport.vue
@@ -10,5 +10,5 @@ const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
 <template>
-  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-dvh w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
 </template>

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ const chatContext = useChatContext()`
`20`	`20`
`21`	`21`	`<div`
`22`	`22`	`v-show="!messages.length && !isFetching"`
`23`		`- class="absolute left-0 z-0 h-screen w-full place-content-center overflow-hidden transition-height"`
	`23`	`+ class="absolute left-0 z-0 w-full place-content-center overflow-hidden transition-height h-dvh"`
`24`	`24`	`>`
`25`	`25`	`<IUIMaybeGlassCard`
`26`	`26`	`v-if="!messages.length"`