Wrap title in header tag. Do not allow it to wrap. Closes #2474 #2446

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 {
+    .title {
-      padding: 0.2rem;
-    }
-
-    span {
       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%;
     }
   }
 }

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 && (