fix: responsive layout

src/pages/App/DesktopLayout.js

@@ -6,11 +6,13 @@ import {CalendarOutlined, HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-
 import {AppRoute} from "../../routes/app";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
+import {useMediaQuery} from "react-responsive";
 
 const {Text, Paragraph} = Typography;
 const {Header, Content, Sider} = Layout;
 
 export const DesktopLayout = observer(() => {
+    const xl = useMediaQuery({minWidth: 1024});
     const store = useStore();
     const [clicked, setClicked] = useState(false);
 
@@ -20,10 +22,12 @@ export const DesktopLayout = observer(() => {
             className={"transparent"}
             hasSider={store.ui.mediaQuery.isDesktop}
             style={{
-                paddingLeft: 0,
+                paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
                 display: "flex",
-                width: "100vw",
-                height: "100vh",
+                // minWidth: 1024,
+                width: "100%",
+                height: "100%",
+                position: "relative",
             }}
         >
             {store.ui.mediaQuery.isDesktop && <Sider