Fixed mobile styling issue

Author: Jake-Short

Diff for: components/sidebar.js

@@ -91,8 +91,8 @@ export default function Sidebar(props) {
 
 			<div className={styles.topBarMobile}>
 				<div className={styles.topBarMobileInner} style={{ borderColor: `${sidebarShown ? 'var(--divider-color)' : 'transparent'}`, width: `${sidebarShown ? '250px' : '38px'}` }}>
-					<X className={styles.menuBarIcon} style={{ marginLeft: `${sidebarShown ? '212px' : '0'}`, position: `${sidebarShown ? 'unset' : 'absolute'}`, transform: `scale(${sidebarShown ? '1' : '0'})` }} onClick={() => setSidebarShown(!sidebarShown)} size={24} />
-					<Menu className={styles.menuBarIcon} style={{ marginLeft: `${sidebarShown ? '212px' : '0'}`, position: `${sidebarShown ? 'absolute' : 'unset'}`, transform: `scale(${sidebarShown ? '0' : '1'})` }} onClick={() => setSidebarShown(!sidebarShown)} size={24} />
+					<X className={styles.menuBarIcon} style={{ marginLeft: `${sidebarShown ? '212px' : '0'}`, position: `${sidebarShown ? 'unset' : 'absolute'}`, transform: `scale(${sidebarShown ? '1' : '0'})` }} onClick={() => setSidebarShown(!sidebarShown)} size={28} />
+					<Menu className={styles.menuBarIcon} style={{ marginLeft: `${sidebarShown ? '212px' : '0'}`, position: `${sidebarShown ? 'absolute' : 'unset'}`, transform: `scale(${sidebarShown ? '0' : '1'})` }} onClick={() => setSidebarShown(!sidebarShown)} size={28} />
 				</div>
 			</div>
 		</React.Fragment>

Diff for: styles/index.module.css

@@ -29,18 +29,22 @@
     padding: 0 0 0 302px;
 }
 
+.contentInner {
+    flex: 1;
+    height: 100%;
+
+    padding: 5% 7%;
+}
+
 @media only screen and (max-width: 768px) {
     /* For mobile phones: */
     .content {
         padding: 0;
     }
-}
 
-.contentInner {
-    flex: 1;
-    height: 100%;
-
-    padding: 5% 7%;
+    .contentInner {
+        padding-top: calc(5% + 40px);
+    }
 }
 
 

Diff for: styles/sidebar.module.css

@@ -127,6 +127,7 @@
         top: 0;
 
         width: 100%;
+        max-height: 40px;
 
         background: var(--main-background-color);
 
@@ -139,6 +140,7 @@
         padding: 7px;
 
         width: 250px;
+        max-height: 40px;
 
         border-right: solid 2px var(--divider-color);