From 7b1eb080baefbb36e71b7256acf9655700bb53c6 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 8 Mar 2023 12:50:36 -0500
Subject: [PATCH] UX: ensure header logo has dimensions, style clean-up
 (#20512)

---
 app/assets/stylesheets/common/base/header.scss | 15 +++++++++++----
 app/assets/stylesheets/mobile/header.scss      | 18 +-----------------
 2 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 3768d5f3e21..8af17ba1fd0 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -43,9 +43,15 @@
   }
 
   .title {
+    --d-logo-height: 2.667em;
     display: flex;
     align-items: center;
     height: 100%;
+    animation: fadein 0.5s;
+    // min-width acts as a placeholder if the small logo takes a while to load
+    // it prevents topic title from shifting after the small logo loads
+    // it's set to match the #site-logo height so square small logos don't resize when titles dock
+    min-width: var(--d-logo-height);
     a,
     a:visited {
       color: var(--header_primary);
@@ -55,14 +61,14 @@
       // allows large logos to be hidden if there are too many other header elements
       // this prioritizes nav elements, especially in cases of high zoom levels
       overflow: hidden;
-      a {
-        min-width: 0;
-      }
     }
   }
 
   #site-logo {
+    height: var(--d-logo-height);
     width: auto;
+    max-width: 100%;
+    object-fit: contain;
   }
 
   #site-text-logo {
@@ -119,7 +125,7 @@
 
 .d-header-icons {
   text-align: center;
-  margin: 0 0 0 5px;
+  margin: 0 0 0 0.5em;
   list-style: none;
 
   > li {
@@ -288,6 +294,7 @@
 
 // topic info in the header
 .extra-info-wrapper {
+  flex: 1 0 0;
   display: flex;
   align-items: center;
   height: 100%;
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 2d8b256c23f..00877ad59b9 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -5,26 +5,10 @@
 .d-header {
   height: 3.66em;
 
-  // some protection for text-only site titles
   .title {
-    max-width: 75%;
-    @include ellipsis;
-    animation: fadein 0.5s;
-    // This acts as a placeholder if for some reason the small logo takes a while
-    // to load - prevents topic title from shifting after the small logo loads.
-    // It's hardcoded to 36px because that's the width we use inline for the small
-    // logo in the home-logo widget.
-    min-width: 36px;
-    a {
-      display: block;
-      width: 100%;
-    }
+    --d-logo-height: 2.4em;
   }
 
-  #site-logo {
-    max-height: 2.4em;
-    max-width: 100%;
-  }
   #site-text-logo {
     font-size: var(--font-up-1);
   }