From 047e61133ab6a98531642bcd857fe77c726d06f0 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 8 Dec 2022 14:16:05 -0800
Subject: [PATCH] Reduce the height of the header

---
 web/components/ui/Header/Header.module.scss | 10 +++++++---
 web/components/ui/Header/Header.tsx         |  4 +++-
 web/styles/globals.scss                     |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss
index 67047264f..34673cea8 100644
--- a/web/components/ui/Header/Header.module.scss
+++ b/web/components/ui/Header/Header.module.scss
@@ -6,20 +6,24 @@
   align-items: center;
   justify-content: space-between;
   z-index: 20;
-  padding: 0.4rem 0.7rem;
+  padding: 1rem 0.7rem;
   box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
   background-color: var(--theme-color-background-header);
 
   .logo {
     display: flex;
     align-items: center;
+
+    svg {
+      padding: 0.2rem;
+    }
+
     span {
       color: var(--theme-color-components-text-on-dark);
       font-family: var(--theme-text-display-font-family);
       margin-left: 0.5rem;
-      font-size: clamp(1rem, 4vw, 2rem);
+      font-size: clamp(1rem, 4vw, 1.6rem);
       font-weight: 600;
     }
   }
 }
-
diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx
index 9f759f355..82ee29114 100644
--- a/web/components/ui/Header/Header.tsx
+++ b/web/components/ui/Header/Header.tsx
@@ -20,7 +20,9 @@ export const Header: FC<HeaderComponentProps> = ({
 }) => (
   <AntHeader className={cn([`${styles.header}`], 'global-header')}>
     <div className={`${styles.logo}`}>
-      <OwncastLogo variant="contrast" />
+      <div id="header-logo">
+        <OwncastLogo variant="contrast" />
+      </div>
       <span className="global-header-text">{name}</span>
     </div>
     {chatAvailable && !chatDisabled && <UserDropdown />}
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index 2ad5696df..9d3726aab 100644
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@@ -9,7 +9,7 @@
 :root {
   --content-padding: 12px;
   --module-spacing: 12px; // margin size between lines of stuff, if needed
-  --header-height: 4rem; // needed for making main content scrollable;
+  --header-height: 2.5rem; // needed for making main content scrollable;
   --footer-height: 2.5rem; // needed for making main content scrollable;
   --content-height: calc(100vh - var(--header-height));
 }