fix: fix scroll on notes page

slater-notes · Apr 22, 2021 · d02a42b · d02a42b
1 parent e4aabe9
commit d02a42b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/src/containers/Note/NotePage.tsx b/src/containers/Note/NotePage.tsx
@@ -91,11 +91,7 @@ const NotePage = ({ note }: Props) => {
   }, [note]);
 
   return (
-    <div
-      id={`note-page-${note.noteItem.id}`}
-      className={classes.container}
-      style={{ height: '100vh', overflowX: 'auto' }}
-    >
+    <div id={`note-page-${note.noteItem.id}`} className={classes.container}>
       <TopBar note={note} saved={saved} />
 
       <div
@@ -137,7 +133,6 @@ const NotePage = ({ note }: Props) => {
 
 const useStyles = makeStyles((theme) => ({
   container: {
-    backgroundColor: theme.palette.background.default,
     width: 1000,
     margin: '0 auto',
   },

diff --git a/src/containers/Note/index.tsx b/src/containers/Note/index.tsx
@@ -1,10 +1,13 @@
+import { makeStyles } from '@material-ui/core';
 import { defer } from 'lodash';
 import { useEffect, useState } from 'react';
 import { useStoreState } from '../../store/typedHooks';
 import { ActiveNote } from '../../types/activeNote';
 import NotePage from './NotePage';
 
 const Note = () => {
+  const classes = useStyles();
+
   const [notes, setNotes] = useState<ActiveNote[]>([]);
 
   const activeNote = useStoreState((s) => s.activeNote);
@@ -38,7 +41,7 @@ const Note = () => {
   }, [activeNote]);
 
   return (
-    <>
+    <div className={classes.container}>
       {notes.map((note) => (
         <div
           key={note.noteItem.id}
@@ -47,8 +50,15 @@ const Note = () => {
           <NotePage note={note} />
         </div>
       ))}
-    </>
+    </div>
   );
 };
 
+const useStyles = makeStyles((theme) => ({
+  container: {
+    height: '100vh',
+    overflowX: 'auto',
+  },
+}));
+
 export default Note;