From 39187d98149e9822a8c9c21da9c1dc6a7aff4e49 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 10 Jul 2024 15:50:34 -0400
Subject: [PATCH] A11Y: improve notification panel layout for high zoom levels
 (#27848)

---
 .../app/components/glimmer-site-header.gjs        | 15 ++++++++-------
 .../stylesheets/common/base/menu-panel.scss       | 14 ++++++++++++--
 app/assets/stylesheets/desktop/menu-panel.scss    |  7 +++++--
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs b/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
index c7d81ad1894..b0971a8d6b7 100644
--- a/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
+++ b/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
@@ -56,6 +56,10 @@ export default class GlimmerSiteHeader extends Component {
     return !this.sidebarEnabled || this.site.narrowDesktopView;
   }
 
+  get slideInMode() {
+    return this.site.mobileView || this.site.narrowDesktopView;
+  }
+
   get leftMenuClass() {
     if (isDocumentRTL()) {
       return "user-menu";
@@ -182,14 +186,11 @@ export default class GlimmerSiteHeader extends Component {
     const menuPanels = document.querySelectorAll(".menu-panel");
 
     if (menuPanels.length === 0) {
-      this._animate = this.site.mobileView || this.site.narrowDesktopView;
+      this._animate = this.slideInMode;
       return;
     }
 
-    let viewMode =
-      this.site.mobileView || this.site.narrowDesktopView
-        ? "slide-in"
-        : "drop-down";
+    let viewMode = this.slideInMode ? "slide-in" : "drop-down";
 
     menuPanels.forEach((panel) => {
       if (menuPanelContainsClass(panel)) {
@@ -208,7 +209,7 @@ export default class GlimmerSiteHeader extends Component {
         let finalPosition = PANEL_WIDTH;
         this._swipeMenuOrigin = "right";
         if (
-          (this.site.mobileView || this.site.narrowDesktopView) &&
+          this.slideInMode &&
           panel.parentElement.classList.contains(this.leftMenuClass)
         ) {
           this._swipeMenuOrigin = "left";
@@ -418,7 +419,7 @@ export default class GlimmerSiteHeader extends Component {
   <template>
     <div
       class={{concatClass
-        (if this.site.desktopView "drop-down-mode")
+        (unless this.slideInMode "drop-down-mode")
         "d-header-wrap"
       }}
       {{didInsert this.setupHeader}}
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 6f1552c54fe..c132dfc8f03 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -126,9 +126,14 @@
 
     .btn {
       display: flex;
-      padding: 0.857em;
       position: relative;
-      border-radius: 0px;
+      border-radius: 0;
+      padding: 0.857em;
+      @media screen and (max-height: 400px) {
+        // helps with 400% zoom level
+        font-size: var(--font-down-1);
+        padding: 0.5em 0.875em;
+      }
 
       .d-icon {
         color: var(--primary-medium);
@@ -140,6 +145,11 @@
         right: 6px;
         top: 6px;
         font-size: var(--font-down-3);
+        @media screen and (max-height: 400px) {
+          // helps with 400% zoom level
+          right: 0;
+          top: 0;
+        }
       }
 
       &.active {
diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss
index 31353191325..a98dfa581e0 100644
--- a/app/assets/stylesheets/desktop/menu-panel.scss
+++ b/app/assets/stylesheets/desktop/menu-panel.scss
@@ -3,8 +3,11 @@
     width: unset;
   }
 
-  .panel-body {
-    max-height: calc(100vh - 100px);
+  &.drop-down {
+    .panel-body {
+      max-height: calc(100vh - var(--header-offset));
+      max-width: calc(100vw - 2em);
+    }
   }
 }