From 4da3120ba092da5ced94c791611ba56bbe2c8b3f Mon Sep 17 00:00:00 2001
From: Neko Aria <990879119@qq.com>
Date: Sun, 24 Mar 2024 16:53:42 +0800
Subject: [PATCH] =?UTF-8?q?fix(mobile):=20=E9=80=9A=E8=BF=87=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E8=B0=83=E6=95=B4=20`.main`=20=E7=9A=84=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E6=9D=A5=E9=80=82=E9=85=8D=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css                  |  2 +-
 src/components/Main/Main.css |  1 -
 src/components/Main/Main.jsx | 22 ++++++++++++++++++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/App.css b/src/App.css
index 3accdfd24..1c087d886 100644
--- a/src/App.css
+++ b/src/App.css
@@ -80,7 +80,7 @@
   }
 
   .entry-panel {
-    padding: 7px 25px 34px 25px !important;
+    padding: 10px !important;
   }
 }
 
diff --git a/src/components/Main/Main.css b/src/components/Main/Main.css
index 5f82a4cdf..aaa06a3f4 100644
--- a/src/components/Main/Main.css
+++ b/src/components/Main/Main.css
@@ -2,7 +2,6 @@
   background-color: var(--color-fill-1);
   padding-top: 49px;
   padding-left: 240px;
-  height: calc(100vh - 49px);
   display: flex;
   transition:
     padding-left 0.1s linear,
diff --git a/src/components/Main/Main.jsx b/src/components/Main/Main.jsx
index baa51c35b..99435646a 100644
--- a/src/components/Main/Main.jsx
+++ b/src/components/Main/Main.jsx
@@ -6,7 +6,7 @@ import {
   Select,
   Switch,
 } from "@arco-design/web-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Outlet } from "react-router-dom";
 
 import useStore from "../../Store";
@@ -22,6 +22,24 @@ const Main = () => {
   const activeContent = useStore((state) => state.activeContent);
   const setActiveContent = useStore((state) => state.setActiveContent);
 
+  useEffect(() => {
+    const updateHeight = () => {
+      const entryPanel = document.querySelector(".entry-panel");
+      const entryPanelHeight = entryPanel ? entryPanel.offsetHeight : 0;
+      const viewportHeight = window.innerHeight;
+      const adjustedHeight = viewportHeight - entryPanelHeight;
+      document.documentElement.style.setProperty(
+        "--dynamic-viewport-height",
+        `${adjustedHeight}px`,
+      );
+    };
+
+    window.addEventListener("resize", updateHeight);
+    updateHeight();
+
+    return () => window.removeEventListener("resize", updateHeight);
+  }, []);
+
   const SettingsModal = () => (
     <Modal
       visible={visible.settings}
@@ -119,7 +137,7 @@ const Main = () => {
   };
 
   return (
-    <div className="main">
+    <div className="main" style={{ height: "var(--dynamic-viewport-height)" }}>
       <Outlet />
       <SettingsModal />
       <AddFeedModal />