[web] Allow OVERLEAF_NAV_TITLE and OVERLEAF_HEADER_IMAGE_URL to be used at the same time (#28445)

* Remove unused navbar-website-redesign.pug

* Add custom logo and title to the navbar settings

* Update navbar-header so it handles logo+title, and without overflowing

* Revert "Add custom logo and title to the navbar settings"

This reverts commit a860fca916714fa34befa231a0b7f43fcbcc3aee.

GitOrigin-RevId: 4d87b47a5c6f64130fe2b57c57ee8f808baef271

services/web/frontend/js/shared/components/navbar/header-logo-or-title.tsx

@@ -9,33 +9,20 @@ export default function HeaderLogoOrTitle({
   overleafLogo?: string
 }) {
   const { appName } = getMeta('ol-ExposedSettings')
-  if (customLogo) {
-    return (
-      // eslint-disable-next-line jsx-a11y/anchor-has-content
-      <a
-        href="/"
-        aria-label={appName}
-        className="navbar-brand"
-        style={{ backgroundImage: `url("${customLogo}")` }}
-      />
-    )
-  } else if (title) {
-    return (
-      <a href="/" aria-label={appName} className="navbar-title">
-        {title}
-      </a>
-    )
-  } else {
-    const style = overleafLogo
-      ? {
-          style: {
-            backgroundImage: `url("${overleafLogo}")`,
-          },
-        }
-      : null
-    return (
-      // eslint-disable-next-line jsx-a11y/anchor-has-content
-      <a href="/" aria-label={appName} className="navbar-brand" {...style} />
-    )
-  }
+  const logoUrl = customLogo ?? overleafLogo
+  return (
+    <a href="/" aria-label={appName} className="navbar-brand">
+      {(customLogo || !title) && (
+        <div
+          className="navbar-logo"
+          style={logoUrl ? { backgroundImage: `url("${logoUrl}")` } : {}}
+        />
+      )}
+      {title && (
+        <div className="navbar-title">
+          <span>{title}</span>
+        </div>
+      )}
+    </a>
+  )
 }

services/web/frontend/stylesheets/components/navbar.scss

@@ -5,6 +5,8 @@
 
 // Default navbar
 .navbar-default {
+  --bs-navbar-brand-padding-y: 0;
+
   background-color: var(--navbar-bg);
   border-color: var(--navbar-border);
   padding: var(--navbar-padding);
@@ -22,27 +24,48 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    flex: 1;
+    flex: 1 1 0;
+    min-width: 0;
   }
 
   .navbar-brand {
-    width: var(--navbar-brand-width);
     height: $header-height;
-    padding: 0;
-    background: var(--navbar-brand-image-url) no-repeat left center;
-    background-size: contain;
-  }
-
-  .navbar-title {
-    display: inline-block;
-    font-size: var(--navbar-title-font-size);
-    color: var(--navbar-title-color);
     text-decoration: none;
+    z-index: 15;
+    display: flex;
+    gap: var(--spacing-08);
+    max-width: 100%;
+    min-width: 0;
 
     &:hover,
     &:active,
     &:focus {
-      color: var(--navbar-title-color-hover);
+      text-decoration: none;
+    }
+
+    .navbar-logo {
+      flex: 0 0 auto;
+      width: var(--navbar-brand-width);
+      height: $header-height;
+      padding: 0;
+      background: var(--navbar-brand-image-url) no-repeat left center;
+      background-size: contain;
+    }
+
+    .navbar-title {
+      display: inline-block;
+      font-size: var(--navbar-title-font-size);
+      color: var(--navbar-title-color);
+      text-decoration: none;
+      align-self: center;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: var(--navbar-title-color-hover);
+      }
     }
   }
 
@@ -130,6 +153,10 @@
   .navbar-form {
     border-color: var(--navbar-border);
   }
+
+  .navbar-collapse:not(.show, .collapsing) {
+    flex: 0 0 auto; // allow navbar title to expand without overflowing
+  }
 }
 
 @include media-breakpoint-only(lg) {

services/web/frontend/stylesheets/pages/project-list-ds-nav.scss

@@ -18,18 +18,10 @@
     --navbar-toggler-expanded-bg: none;
     --navbar-toggler-expanded-color: var(--content-secondary);
 
-    .navbar-header > a {
-      position: relative;
-      z-index: 15;
-
+    .navbar-header .navbar-logo {
       @include media-breakpoint-up(md) {
-        &.navbar-brand {
-          top: var(--spacing-05);
-        }
-
-        &.navbar-title {
-          padding-top: var(--spacing-05);
-        }
+        position: relative;
+        top: var(--spacing-05);
       }
     }