Merge pull request #41 from NekoAria/main

src/App.css

@@ -80,7 +80,7 @@
   }
 
   .entry-panel {
-    padding: 7px 25px 34px 25px !important;
+    padding: 10px !important;
   }
 }
 

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,

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 />