Add more space at bottom for mobile

frontend/src/components/organisms/LeftBar/style.module.scss

@@ -6,23 +6,22 @@
   width: 0;
   margin-left: -250px;
   height: calc(100vh - 61px);
-	padding-bottom: 72px;
-	overflow-y: auto;
-	overflow-x: hidden;
+  padding-bottom: 56px;
+  overflow-y: auto;
+  overflow-x: hidden;
   background: #fff;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
-	transition: all 0.5s ease;
-	z-index: 5000;
+  transition: all 0.5s ease;
+  z-index: 5000;
 }
 
 :global(#wrapper.toggledLeft) #leftbarWrapper {
-	width: 250px;
+  width: 250px;
 }
 
-
 @media (max-width: 992px) {
   .leftbarStatus {
     margin-top: 30px;
@@ -37,6 +36,10 @@
     width: max-content;
     text-transform: uppercase;
   }
+
+  #leftbarWrapper {
+    padding-bottom: 100px;
+  }
 }
 
 @media (min-width: 992px) {
@@ -50,13 +53,13 @@
     letter-spacing: 0;
     position: relative;
     width: max-content;
-	}
-	
-	#leftbarWrapper {
+  }
+
+  #leftbarWrapper {
     width: 250px;
-	}
-	
-	:global(#wrapper.toggledLeft) #leftbarWrapper{
+  }
+
+  :global(#wrapper.toggledLeft) #leftbarWrapper {
     width: 0;
   }
 }

frontend/src/components/organisms/RightBar/style.module.scss

@@ -4,18 +4,18 @@
   position: fixed;
   right: 250px;
   width: 0;
-	margin-right: -250px;
+  margin-right: -250px;
   height: calc(100vh - 61px);
-	padding-bottom: 72px;
-	overflow-y: auto;
-	overflow-x: hidden;
+  padding-bottom: 56px;
+  overflow-y: auto;
+  overflow-x: hidden;
   background: #fff;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
-	transition: all 0.5s ease;
-	z-index: 5000;
+  transition: all 0.5s ease;
+  z-index: 5000;
 }
 
 #rightbarWrapper::-webkit-scrollbar {
@@ -28,16 +28,15 @@
 }
 
 :global(#wrapper.toggledRight) #rightbarWrapper {
-	width: 250px;
+  width: 250px;
 }
 
-
 @media (max-width: 992px) {
   .rightbarStatus {
     margin-top: 30px;
     margin-left: 16px;
     margin-right: 16px;
-		margin-bottom: 0px;
+    margin-bottom: 0px;
     font-size: 16px;
     font-weight: 500;
     color: #000000;
@@ -46,6 +45,10 @@
     width: max-content;
     text-transform: uppercase;
   }
+
+  #rightbarWrapper {
+    padding-bottom: 100px;
+  }
 }
 
 @media (min-width: 992px) {
@@ -54,20 +57,20 @@
     margin-left: 32px;
     margin-right: 32px;
     margin-bottom: 0px;
-		font-size: 16px;
-		font-weight: 500;
-		text-align: right;
+    font-size: 16px;
+    font-weight: 500;
+    text-align: right;
     color: #000000;
     letter-spacing: 0;
     position: relative;
     width: max-content;
-	}
-	
-	#rightbarWrapper {
+  }
+
+  #rightbarWrapper {
     width: 250px;
-	}
-	
-	:global(#wrapper.toggledRight) #rightbarWrapper{
+  }
+
+  :global(#wrapper.toggledRight) #rightbarWrapper {
     width: 0;
   }
 }