fix: content render in relation to header

- move content under header
- move scrollbar within header and bottom of viewport

Author: ZanzyTHEbar

GUI/ETVR/src/routes/Routes.tsx

@@ -23,7 +23,9 @@ const AppRoutes = () => {
                     name={connectedUserName() ? `Welcome ${connectedUserName()}` : 'Welcome!'}
                 />
             </div>
-            <Path />
+            <div class="pt-[70px]">
+                <Path />
+            </div>
         </main>
     )
 }

GUI/ETVR/src/styles/header-wrapper.css

@@ -15,7 +15,7 @@
     flex-direction: row;
     justify-content: space-around;
     position: fixed;
-    top: calc(titlebar - 35px);
+    top: calc(titlebar - 30px);
     left: 0;
     right: 0;
     z-index: 1;

GUI/ETVR/src/styles/scrollbar.css

@@ -1,21 +1,23 @@
 /* width */
 ::-webkit-scrollbar {
-  width: 6px;
+    width: 6px;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 5px grey;
-  border-radius: 10px;
+    box-shadow: inset 0 0 5px grey;
+    border-radius: 10px;
+    margin-top: 99px;
+    margin-bottom: 45px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #6d7faeb4;
-  border-radius: 10px;
+    background: #6d7faeb4;
+    border-radius: 10px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #6d7fae;
-}
+    background: #6d7fae;
+}