SCAL-213939 Refactor layout styles and improve responsiveness

src/assets/styles/index.scss

@@ -28,38 +28,49 @@ body {
     padding: $gutter;
     font-family: 'Optimo-Plain';
     font-size: $font-size-normal;
+    overflow-y: hidden;
+    animation: display-transition 1s ease-out;
+}
+
+@keyframes display-transition {
+    0% {
+        opacity: 0;
+    }
+    99%{
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 
 main {
     display: flow-root;
     background-color: var(--body-background-color);
 }
 
-main.withHeaderFooter {
-    padding-top: 64px;
+main {
     display: flex;
-    min-height: 100vh;
-    overflow: hidden;
+    height: calc(100lvh - $header-height);
 }
 
-
-
 * {
     box-sizing: border-box;
 }
 
-strong, b {
-  font-weight: bold;
+strong,
+b {
+    font-weight: bold;
 }
 
 .anchor {
-  display: block;
-  padding-top: 80px;   /* height of sticky header */
-  margin-top: -80px;
+    display: block;
+    padding-top: 80px; /* height of sticky header */
+    margin-top: -80px;
 }
 
 .anchor-link {
-  scroll-margin: 120px;
+    scroll-margin: 120px;
 }
 
 a {
@@ -103,17 +114,53 @@ a {
 
 /*end visited class*/
 
+.headerPlaceholder {
+    height: $header-height;
+}
+
 .introWrapper {
     display: flex;
 }
+
+.documentWrapperContainer {
+    height: calc(100lvh - $document-padding);
+    width: calc(100%);
+    overflow-y: auto;
+
+    &:not(:last-child) {
+        margin-right: 4rem;
+    }
+}
+
+.documentWrapperContainer::-webkit-scrollbar {
+    display: none;
+}
+
+.docmapWrapper {
+    height: calc(100lvh - $document-padding);
+    padding: 10px $padding-md 80px $padding-md;
+    width: 25%;
+    overflow-y: auto;
+}
+
+.docmapWrapper::-webkit-scrollbar {
+    display: none;
+}
+
+.playgroundWrapper {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+}
+
 .pb-10 {
     padding-bottom: 10px;
 }
 
 // TODO : improve all this to use flex
 .restApiWrapper {
     width: 100%;
-    height: 100vh;
+    height: 100lvh;
     overflow: hidden;
 
     iframe {
@@ -125,7 +172,7 @@ a {
 
 // in case header is loaded
 .withHeaderFooter .restApiWrapper {
-  height: calc(100vh - 65px);
+    height: 100%;
 }
 
 button {
@@ -241,7 +288,6 @@ button {
     align-items: center;
 }
 
-
 .earlyAccess {
     border-radius: $beta-border-radius;
     display: inline-flex;
@@ -258,7 +304,6 @@ button {
     align-items: center;
 }
 
-
 .blueBackground {
     background-color: $note-color;
 }
@@ -633,12 +678,32 @@ a.anchor {
     border-radius: 4px;
 }
 
-/* Scrollbar styling end*/
-@media screen and (min-width: 767px) and (max-width: 1024px) {
-    .documentBody {
-        width: calc(100% - 260px);
+.documentBody {
+    width: 100%;
+    height: 100%;
+    overflow-x: auto;
+}
+
+@media screen and (min-width: 1024px) and (max-width: 1300px) {
+    .docmapWrapper {
+        width: 35%;
+    }
+}
+
+@media screen and (min-width: $tablet-resolution-min) and (max-width: $tablet-resolution-max) {
+    .docmapWrapper {
+        display: none;
+    }
+}
+
+@media screen and (max-width: $tablet-resolution-max) {
+    .docmapWrapper {
+        display: none;
     }
+}
 
+/* Scrollbar styling end*/
+@media screen and (min-width: 767px) and (max-width: 1024px) {
     .homeBanner {
         display: none;
     }
@@ -648,8 +713,12 @@ a.anchor {
         max-width: 100%;
     }
 
-    .documentWrapper {
+    .documentWrapperContainer {
         width: 100%;
+
+        &:not(:last-child) {
+            margin-right: 0px;
+        }
     }
     .homeHeaderText {
         width: 100%;
@@ -667,8 +736,38 @@ a.anchor {
     }
 }
 
+@media screen and (max-width: $tablet-resolution-min) {
+    .documentWrapperContainer {
+        width: 100%;
+        overflow-x: auto;
+
+        &:not(:last-child) {
+            margin-right: 0px;
+        }
+
+        pre {
+            overflow-x: auto;
+        }
+    }
+}
+
+@media screen and (max-width: $mobile-resolution-max) {
+    .documentWrapperContainer {
+        width: 100%;
+        overflow-x: auto;
+
+        &:not(:last-child) {
+            margin-right: 0px;
+        }
+
+        pre {
+            overflow-x: auto;
+        }
+    }
+}
+
 .leftNavContainer {
-    margin-top: 0;
+    height: -webkit-fill-available;
 }
 
 @media screen and (max-width: $mobile-resolution-max) {
@@ -690,8 +789,8 @@ a.anchor {
     }
 
     .documentBody {
-        width: 100%;
         padding-left: 0;
+        padding-right: 0;
     }
 
     .homeHeaderText {
@@ -723,10 +822,14 @@ a.anchor {
     .tableContainer {
         overflow: scroll;
     }
+    .leftNavContainer {
+        margin-top: 0px;
+        height: auto;
+    }
 }
 
 @media screen and (max-width: $mobile-resolution-max) {
-    main.withHeaderFooter {
+    main {
         flex-direction: column;
     }
 }
@@ -894,7 +997,6 @@ a.anchor {
     }
 }
 
-
 .document-body-wrapper {
     padding: 30px;
 }

src/assets/styles/variables.scss

@@ -251,3 +251,5 @@ $tag-color-light: $lightgrey;
     --box-shadow-hover: 0 16px 20px 0 rgb(255 255 255 / 6%),
         0 16px 20px 0 rgb(255 255 255 / 6%);
 }
+
+$header-height: 65px;

src/components/DevDocTemplate/askDocs.tsx

@@ -3,10 +3,11 @@ import React from 'react';
 export const AskDocs = () => {
     return (
         <iframe
-            style={{ flex: '1 1 0', height: '100vh' }}
+            style={{ flex: '1 1 0', height: '100lvh' }}
             src="https://tse-app-builder.vercel.app/complete?embed=true"
             frameBorder="0"
             id="iframe"
+            width="100%"
         />
     );
 };