From 04848c1d8c016e9babf07bfc17473686f183531f Mon Sep 17 00:00:00 2001
From: Nathan <34570423+thisprojects@users.noreply.github.com>
Date: Fri, 5 May 2023 19:10:28 +0100
Subject: [PATCH] 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 +-
 web/components/ui/Header/Header.module.scss  | 3 +--
 web/styles/globals.scss                      | 6 +++++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/components/layouts/Main/Main.module.scss b/web/components/layouts/Main/Main.module.scss
index accaa3657..432006b40 100644
--- a/web/components/layouts/Main/Main.module.scss
+++ b/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;
diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss
index aaf955640..8c772b839 100644
--- a/web/components/ui/Header/Header.module.scss
+++ b/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%;
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index 12c8b0ea2..68857174f 100644
--- a/web/styles/globals.scss
+++ b/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 {