From 5c01efd3e28e6386e39d792ce56d4360d376720b Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sat, 24 Dec 2022 16:45:45 -0800
Subject: [PATCH] Wrap title in header tag. Do not allow it to wrap. Closes
 #2474 #2446

---
 web/components/ui/Header/Header.module.scss | 20 +++++++++++++++-----
 web/components/ui/Header/Header.tsx         |  6 ++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss
index 34673cea8..15fcb7df8 100644
--- a/web/components/ui/Header/Header.module.scss
+++ b/web/components/ui/Header/Header.module.scss
@@ -1,3 +1,5 @@
+@import '../../../styles/mixins.scss';
+
 .header {
   position: sticky;
   top: 0px;
@@ -9,21 +11,29 @@
   padding: 1rem 0.7rem;
   box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
   background-color: var(--theme-color-background-header);
+  flex-basis: content;
+
+  .logoImage {
+    @include screen(mobile) {
+      display: none;
+    }
+    padding: 0.2rem;
+  }
 
   .logo {
     display: flex;
     align-items: center;
 
-    svg {
-      padding: 0.2rem;
-    }
-
-    span {
+    .title {
       color: var(--theme-color-components-text-on-dark);
       font-family: var(--theme-text-display-font-family);
       margin-left: 0.5rem;
+      margin-bottom: 0px;
       font-size: clamp(1rem, 4vw, 1.6rem);
       font-weight: 600;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      max-width: 90%;
     }
   }
 }
diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx
index a7a457f3d..22e6cd779 100644
--- a/web/components/ui/Header/Header.tsx
+++ b/web/components/ui/Header/Header.tsx
@@ -20,10 +20,12 @@ export const Header: FC<HeaderComponentProps> = ({
 }) => (
   <AntHeader className={cn([`${styles.header}`], 'global-header')}>
     <div className={`${styles.logo}`}>
-      <div id="header-logo">
+      <div id="header-logo" className={styles.logoImage}>
         <OwncastLogo variant="contrast" />
       </div>
-      <span id="global-header-text">{name}</span>
+      <h1 className={styles.title} id="global-header-text">
+        {name}
+      </h1>
     </div>
     {chatAvailable && !chatDisabled && <UserDropdown />}
     {!chatAvailable && !chatDisabled && (