A11Y: improve notification panel layout for high zoom levels (#27848)

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}}

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 {

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);
+    }
   }
 }