fix:#2954-player-gets-cut-off-vertically (#2987)

* fix:#2954-player-gets-cut-off-vertically

* Use header-height variable everywhere

---------

Co-authored-by: thisProjects <wibbet@wobbet.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/layouts/Main/Main.module.scss

@@ -2,7 +2,7 @@
 
 .layout {
   // this margin is for fixed header
-  margin-top: 55px;
+  margin-top: var(--header-height);
   background-color: var(--theme-color-main-background);
   @include screen(tablet) {
     position: absolute;

web/components/ui/Header/Header.module.scss

@@ -10,7 +10,7 @@
   box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
   background-color: var(--theme-color-background-header);
   position: fixed;
-  top:0;
+  top: 0;
   width: 100%;
   z-index: 200;
   h1 {
@@ -19,7 +19,6 @@
   }
   // fixes header on tablet and below
   @include screen(tablet) {
-    --header-height: 3.85rem;
     position: fixed;
     top: 0px;
     width: 100%;

web/styles/globals.scss

@@ -9,7 +9,7 @@
 :root {
   --content-padding: 0.95rem;
   --module-spacing: 12px; // margin size between lines of stuff, if needed
-  --header-height: 4.3rem; // needed for making main content scrollable;
+  --header-height: 70px; // needed for making main content scrollable;
   --footer-height: 2.5rem; // needed for making main content scrollable;
   --content-height: calc(100vh - var(--header-height));
   --replacement-bar-height: 46px; // needed for making main content scrollable on mobile;
@@ -19,6 +19,10 @@
   --chat-notification-icon-padding: 6px;
   --chat-message-padding: 10px;
   --chat-text-highlight-border-radius: 3px;
+
+  @include screen(tablet) {
+    --header-height: 3.85rem;
+  }
 }
 
 ::selection {