fix: fix merger layout error

Author: zziglet

src/services/home/chat/index.tsx

@@ -17,21 +17,17 @@ import { listChats } from "../../../api/chat";
 import TestSection from "./TestSection";
 
 function HomePage() {
+  const [viewportHeight, setViewportHeight] = useState(
+    window.visualViewport?.height || window.innerHeight
+  );
   useEffect(() => {
-    const setViewportHeight = () => {
-      const height = window.visualViewport?.height || window.innerHeight;
-      const vh = height * 0.01;
-      document.documentElement.style.setProperty("--vh", `${vh}px`);
-    };
-
-    setViewportHeight();
-    window.visualViewport?.addEventListener("resize", setViewportHeight);
-    window.addEventListener("resize", setViewportHeight);
-
-    return () => {
-      window.visualViewport?.removeEventListener("resize", setViewportHeight);
-      window.removeEventListener("resize", setViewportHeight);
+    const updateHeight = () => {
+      setViewportHeight(window.visualViewport?.height || window.innerHeight);
     };
+    updateHeight();
+    window.visualViewport?.addEventListener("resize", updateHeight);
+    return () =>
+      window.visualViewport?.removeEventListener("resize", updateHeight);
   }, []);
 
   const isKeyboardOpen = useKeyboardStore((state) => state.isKeyboardOpen);
@@ -179,14 +175,18 @@ function HomePage() {
   return (
     <main
       className="relative flex flex-col bg-white overflow-hidden"
-      style={{ height: "calc(var(--vh, 1vh) * 100)" }}
+      style={{ height: `${viewportHeight}px` }}
     >
       <div className="sticky top-0 w-full gap-4 px-4 py-4">
         <HeaderCard />
       </div>
       <div
-        className="flex-1 w-full overflow-y-auto overflow-x-hidden flex flex-col gap-4 px-4 py-4 mb-12"
-        style={{ WebkitOverflowScrolling: "touch", overscrollBehavior: "none" }}
+        className="flex-1 w-full overflow-y-auto overflow-x-hidden flex flex-col gap-4 px-4 py-4"
+        style={{
+          WebkitOverflowScrolling: "touch",
+          overscrollBehavior: "none",
+          marginBottom: isKeyboardOpen ? 0 : "3rem",
+        }}
       >
         <DateChip date={new Date()} />
         {isNewSession && (

src/services/home/test/index.tsx

@@ -97,7 +97,7 @@ export default function DiagnosisTest({
   return (
     <main className="pt-16 mt-5">
       {step === "intro" && (
-        <div className="z-10 pb-32 flex flex-col items-center">
+        <div className="z-10 flex flex-col items-center">
           <StartCard type={type} />
           <CautionTypo />
           <div className="w-full px-4">
@@ -108,7 +108,7 @@ export default function DiagnosisTest({
               Start the Test
             </button>
           </div>
-          <div className="absolute -z-10 bottom-0 w-full h-72 bg-gradient-to-b from-[#fffaf4]/20 to-[#f57c00]/20 pointer-events-none" />
+          <div className="sticky bottom-0 -z-10 w-full h-72 bg-gradient-to-b from-[#fffaf4]/20 to-[#f57c00]/20 pointer-events-none" />
         </div>
       )}
 

src/services/setting/index.tsx

@@ -6,11 +6,13 @@ import FAQSection from "./Question";
 
 function SettingPage() {
   return (
-    <main className="flex flex-col gap-5 pb-52 pt-16 px-5 mt-5 bg-white">
-      <GlobalNavigation />
-      <LanguageSetting />
-      <FAQSection />
-      <PolicySection />
+    <main className="pb-52 pt-16 mt-5 bg-white">
+      <div className="flex flex-col items-center gap-5 w-full px-5">
+        <GlobalNavigation />
+        <LanguageSetting />
+        <FAQSection />
+        <PolicySection />
+      </div>
       <BottomNavigation />
     </main>
   );