Fix tablet/mobile view and add a custom scroll bar

Author: Lnleite

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "prettier.tabWidth": 2,
+    "editor.tabSize": 2
+}

client/src/components/EmployerProfile/EmployerProfile.js

@@ -1,8 +1,14 @@
 import React from 'react';
 import firebase from '../../firebase/firebase';
-import { ModalContainer, ModalMain } from '../../styles/ModalGlobalStyle';
+import { ModalContainer } from '../../styles/ModalGlobalStyle';
 import profile from '../../images/avatar-icon.jpg';
-import { Info, Styling, ProfilePic, InfoContainer } from './EmployerStyles';
+import {
+  Info,
+  Styling,
+  ProfilePic,
+  InfoContainer,
+  EmployerModalMain,
+} from './EmployerStyles';
 import axios from 'axios';
 import EmployerPostings from './EmployerPostings';
 import FavHeart from '../../images/favorites-icon.png';
@@ -131,10 +137,7 @@ class EmployerProfile extends React.Component {
     return (
       <>
         <ModalContainer data-type="modal-container">
-          <ModalMain
-            style={{ maxWidth: '750px', borderRadius: '20px' }}
-            className="modal"
-          >
+          <EmployerModalMain className="modal">
             {this.state.loading ? (
               <LoadingModal />
             ) : (
@@ -166,7 +169,7 @@ class EmployerProfile extends React.Component {
                 />
               </Styling>
             )}
-          </ModalMain>
+          </EmployerModalMain>
         </ModalContainer>
       </>
     );

client/src/components/EmployerProfile/EmployerStyles.js

@@ -1,5 +1,16 @@
 import styled from 'styled-components';
 
+import { ModalMain } from '../../styles/ModalGlobalStyle';
+
+export const EmployerModalMain = styled(ModalMain)`
+  max-width: 750px;
+  overflow-y: auto;
+
+  @media (max-width: 801px) {
+    height: 98%;
+  }
+`;
+
 export const Info = styled.div`
   display: flex;
   flex-direction: column;
@@ -24,11 +35,11 @@ export const Styling = styled.div`
   display: flex;
   padding: 5%;
   justify-content: space-between;
-  max-width: 750px;
   width: 100%;
-  @media (max-width: 650px) {
+  @media (max-width: 801px) {
     flex-wrap: wrap;
-    padding-top: 500px;
+    flex-direction: column;
+    align-items: center;
   }
 `;
 
@@ -77,4 +88,8 @@ export const Job = styled.div`
     text-decoration: none;
     color: rgba(109, 7, 26, 0.95);
   }
+
+  @media (max-width: 801px) {
+    max-width: none;
+  }
 `;

client/src/styles/ModalGlobalStyle.js

@@ -27,4 +27,26 @@ export const ModalMain = styled.div`
   @media (max-width: 661px) {
     width: 90%;
   }
+
+  /* width */
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    margin: 2% 0;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+    height: 50px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
 `;