Merge pull request #7003 from GitWizzz/fix/privacy-overlay

fix(policy): Prevent overlay from blocking content on small screens

Author: Namanv0509

src/components/legal-navigation/toc.style.js

@@ -7,7 +7,7 @@ const TOCWrapper = styled.div`
   left: 0rem;
   margin-left: 3rem;
   margin-top: 3rem;
-  margin-bottom : 3rem;
+  margin-bottom : 2rem;
   width:15rem;
   word-break: break-word;
   overflow-wrap: break-word;
@@ -108,6 +108,8 @@ const TOCWrapper = styled.div`
   @media only screen and (max-width: 750px){
    position: initial;
    margin-right: 3rem;
+   margin-bottom : 0rem;
+   padding-bottom: 1rem;
    width: auto;
    .toc-toggle-btn{
     display:inline-block;

src/sections/Company/Legal/terms.style.js

@@ -9,26 +9,29 @@ const TermsWrapper = styled.section`
     max-width: 900px;
     margin: 0 auto;
     padding-left: 2px;
-    margin-top: -20rem; 
+    margin-top: -20rem;
+    @media (max-width: 750px) {
+      margin-top: 0;
+    }
   }
   .page-header-section {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      background: rgb(71,126,150);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background: rgb(71,126,150);
       background: linear-gradient(250deg, rgba(71,126,150,1) 0%, rgba(0,179,159,1) 35%, rgba(60,73,79,1) 100%);
-      padding: 3rem 0;
+    padding: 3rem 0;
+    h1 {
+      color: white;
+    }
+    @media (max-width: 680px) {
+      padding: 2rem 0;
       h1 {
-          color: white;
-      }
-      @media (max-width: 680px) {
-       padding: 2rem 0;
-          h1 {
-              font-size: 1.75rem;
-          }
+        font-size: 1.75rem;
       }
     }
+  }
 
   .conduct_heading {
     text-align: left;
@@ -78,4 +81,4 @@ const TermsWrapper = styled.section`
   }
 `;
 
-export default TermsWrapper;
+export default TermsWrapper;