fix: remove 100vh, fix mobile layout bug

yzh990918 · yzh990918 · commit cc3ee4f79719 · 2023-06-20T12:11:17.000+08:00
diff --git a/src/components/Send.tsx b/src/components/Send.tsx
@@ -6,7 +6,7 @@ import { addConversation, conversationMap, currentConversationId } from '@/store
 import { loadingStateMap, streamsMap } from '@/stores/streams'
 import { handlePrompt } from '@/logics/conversation'
 import { globalAbortController } from '@/stores/settings'
-import { useI18n, useMobileScreen } from '@/hooks'
+import { useI18n } from '@/hooks'
 import Button from './ui/Button'
 
 export default () => {
@@ -21,7 +21,6 @@ export default () => {
   const $globalAbortController = useStore(globalAbortController)
 
   const [inputPrompt, setInputPrompt] = createSignal('')
-  const [footerClass, setFooterClass] = createSignal('')
   const isEditing = () => inputPrompt() || $isSendBoxFocus()
   const currentConversation = () => {
     return $conversationMap()[$currentConversationId()]
@@ -33,10 +32,6 @@ export default () => {
     createShortcut(['Control', 'Enter'], () => {
       $isSendBoxFocus() && handleSend()
     })
-
-    useMobileScreen(() => {
-      setFooterClass('sticky bottom-0 left-0 right-0 overflow-hidden')
-    })
   })
 
   const stateType = () => {
@@ -172,7 +167,7 @@ export default () => {
   }
 
   return (
-    <div class={`relative shrink-0 border-t border-base pb-[env(safe-area-inset-bottom)] transition transition-colors duration-300  ${stateRootClass()} ${footerClass()}`}>
+    <div class={`sticky bottom-0 left-0 right-0 overflow-hidden shrink-0 border-t border-base pb-[env(safe-area-inset-bottom)] transition transition-colors duration-300  ${stateRootClass()}`}>
       <div class={`relative transition transition-height duration-240 ${stateHeightClass()}`}>
         <Switch fallback={<EmptyState />}>
           <Match when={stateType() === 'error'}>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,7 +9,7 @@ import BuildStores from '@/components/client-only/BuildStores'
 ---
 
 <Layout title="Anse">
-    <div class="h-100vh w-screen flex">
+    <div class="h-full w-screen flex">
       <Sidebar direction="left" class="hidden md:block">
         <ConversationSidebar client:only />
       </Sidebar>
diff --git a/unocss.config.ts b/unocss.config.ts
@@ -88,6 +88,10 @@ export default defineConfig({
       --c-shadow: #00000008;
       }
 
+      html,body {
+        height: 100%;
+      }
+
       html.dark {
         --c-scroll: #333333;
         --c-scroll-hover: #555555;
