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