fix weird styling issues 2

Author: Sebastian-Webster

frontend/src/App.js

@@ -89,7 +89,7 @@ function App() {
         </div>
       </header>
       {storedCredentials ? 
-        <div style={{height: '100vh', width: '100vw', margin: 0, padding: 0, paddingTop: 70}}>
+        <div style={{height: 'calc(100vh - 92px)', width: '100vw', margin: 0, padding: 0, paddingTop: 70}}>
           <Outlet/>
         </div>
       : 

frontend/src/routes/Settings.js

@@ -35,8 +35,9 @@ const Settings = () => {
 
     return (
         <div style={{width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column'}}>
-            <div style={{height: '85%', width: '50%', maxWidth: '50%', backgroundColor: colors.secondary, display: 'flex', flexDirection: 'row', borderRadius: 30}}>
-                <div style={{width: 170, height: '100%', borderRight: `2px solid ${colors.tertiary}`, padding: '30px 5px', overflow: 'scroll'}}>
+            <h1>Settings</h1>
+            <div style={{height: '90%', width: '50%', maxWidth: '50%', backgroundColor: colors.secondary, display: 'flex', flexDirection: 'row', borderRadius: 30}}>
+                <div style={{width: 170, height: 'calc(100% - 60px)', borderRight: `2px solid ${colors.tertiary}`, padding: '30px 5px', overflow: 'scroll'}}>
                     <NavLink to='changepassword' style={selectStyles}>
                         <p>Change Password</p>
                     </NavLink>