Reduce the height of the header

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;
     }
   }
 }
-

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 />}

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));
 }