From 2dbcea9eeeb816dda347027497b3a49634ef851f Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 14 Feb 2023 09:04:48 -0500
Subject: [PATCH] A11Y: Allow header logo/title to hide, if needed (#20244)

---
 .../javascripts/discourse/app/widgets/home-logo.js       | 6 ++++++
 app/assets/stylesheets/common/base/header.scss           | 9 +++++++++
 2 files changed, 15 insertions(+)

diff --git a/app/assets/javascripts/discourse/app/widgets/home-logo.js b/app/assets/javascripts/discourse/app/widgets/home-logo.js
index 32db00bbc2a..7eaeec28298 100644
--- a/app/assets/javascripts/discourse/app/widgets/home-logo.js
+++ b/app/assets/javascripts/discourse/app/widgets/home-logo.js
@@ -13,6 +13,12 @@ export default createWidget("home-logo", {
     href: getURL("/"),
   },
 
+  buildClasses() {
+    if (this.attrs.minimized) {
+      return "title--minimized";
+    }
+  },
+
   href() {
     const href = this.settings.href;
     return typeof href === "function" ? href() : href;
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index d56a2325575..7241c0733ed 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -50,6 +50,15 @@
     a:visited {
       color: var(--header_primary);
     }
+
+    &:not(.title--minimized) {
+      // 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 {