From c932af5d0a5cb2cf9937a5bc195ff7d1d3358de3 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Mon, 25 Apr 2022 23:22:57 +0800
Subject: [PATCH] fix: fix body height

---
 .../client/src/hooks/use-safari-100vh.tsx     | 16 ---------------
 packages/client/src/pages/_app.tsx            |  2 --
 packages/client/src/styles/reset.scss         | 20 ++++++++-----------
 3 files changed, 8 insertions(+), 30 deletions(-)
 delete mode 100644 packages/client/src/hooks/use-safari-100vh.tsx

diff --git a/packages/client/src/hooks/use-safari-100vh.tsx b/packages/client/src/hooks/use-safari-100vh.tsx
deleted file mode 100644
index 84b82bb..0000000
--- a/packages/client/src/hooks/use-safari-100vh.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useEffect } from 'react';
-
-export function useSafari100vh() {
-  useEffect(() => {
-    const appHeight = () => {
-      const doc = document.documentElement;
-      doc.style.setProperty('--app-height', `${window.innerHeight}px`);
-    };
-    window.addEventListener('resize', appHeight);
-    appHeight();
-
-    return () => {
-      window.removeEventListener('resize', appHeight);
-    };
-  }, []);
-}
diff --git a/packages/client/src/pages/_app.tsx b/packages/client/src/pages/_app.tsx
index 27e6fd7..69fdc7a 100644
--- a/packages/client/src/pages/_app.tsx
+++ b/packages/client/src/pages/_app.tsx
@@ -1,13 +1,11 @@
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
-import { useSafari100vh } from 'hooks/use-safari-100vh';
 import { useTheme } from 'hooks/use-theme';
 import 'viewerjs/dist/viewer.css';
 import 'styles/globals.scss';
 import 'tiptap/styles/index.scss';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  useSafari100vh();
   useTheme();
 
   return (
diff --git a/packages/client/src/styles/reset.scss b/packages/client/src/styles/reset.scss
index 8678e09..c5d8a77 100644
--- a/packages/client/src/styles/reset.scss
+++ b/packages/client/src/styles/reset.scss
@@ -5,8 +5,9 @@
   box-sizing: border-box;
 }
 
-html,
-body {
+body,
+html {
+  height: 100%; /* Fill the window */
   padding: 0;
   margin: 0;
 }
@@ -16,13 +17,8 @@ html:focus-within {
   scroll-behavior: smooth;
 }
 
-/* Set core body defaults */
 body {
-  height: 100vh;
-  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
-  height: var(--app-height);
-  line-height: 1.5;
-  text-rendering: optimizespeed;
+  margin: 0;
 
   /* stylelint-disable-next-line selector-id-pattern */
   > div#__next {
@@ -84,8 +80,8 @@ select {
   *,
   *::before,
   *::after {
-    transition-duration: .01ms !important;
-    animation-duration: .01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     scroll-behavior: auto !important;
   }
@@ -98,8 +94,8 @@ select {
 
 ::-webkit-scrollbar-thumb {
   background-color: transparent;
-  border-radius: .5rem;
-  transition: all .2s;
+  border-radius: 0.5rem;
+  transition: all 0.2s;
 }
 
 *:hover {