fix: restructure menu header for styling (#989)

fix #987
muxinc · Sep 26, 2024 · f99f8ed · f99f8ed
1 parent 281c9cd
commit f99f8ed
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/js/menu/media-chrome-menu.ts b/src/js/menu/media-chrome-menu.ts
@@ -141,27 +141,30 @@ template.innerHTML = /*html*/ `
       transform: translate(-100%, 0);
     }
 
-    slot[name="header"] {
-      display: flex;
-      padding: .4em .7em;
-      border-bottom: 1px solid rgb(255 255 255 / .25);
-      cursor: default;
-    }
-
-    slot[name="header"][hidden] {
-      display: none;
-    }
-
-    button[part~="back"] {
+    button {
       background: none;
       color: inherit;
       border: none;
       padding: 0;
       font: inherit;
-      cursor: pointer;
       outline: inherit;
       display: inline-flex;
       align-items: center;
+    }
+
+    slot[name="header"][hidden] {
+      display: none;
+    }
+
+    slot[name="header"] > *,
+    slot[name="header"]::slotted(*) {
+      padding: .4em .7em;
+      border-bottom: 1px solid rgb(255 255 255 / .25);
+      cursor: default;
+    }
+
+    slot[name="header"] > button[part~="back"],
+    slot[name="header"]::slotted(button[part~="back"]) {
       cursor: pointer;
     }
 
@@ -197,7 +200,8 @@ template.innerHTML = /*html*/ `
   </style>
   <style id="layout-row" media="width:0">
 
-    slot[name="header"] {
+    slot[name="header"] > *,
+    slot[name="header"]::slotted(*) {
       padding: .4em .5em;
     }
 
@@ -729,7 +733,7 @@ class MediaChromeMenu extends globalThis.HTMLElement {
     return headerSlot
       .assignedElements({ flatten: true })
       ?.find(
-        (el) => el.part.contains('back') && el.part.contains('button')
+        (el) => el.matches('button[part~="back"]')
       ) as HTMLElement;
   }
 

diff --git a/src/js/utils/anchor-utils.ts b/src/js/utils/anchor-utils.ts
@@ -47,7 +47,11 @@ function getRectRelativeToOffsetParent(
   offsetParent: Element
 ): Rect {
   const rect = element.getBoundingClientRect();
-  const offsetRect = offsetParent.getBoundingClientRect();
+  // offsetParent returns null in the following situations:
+  // - The element or any ancestor has the display property set to none.
+  // - The element has the position property set to fixed (Firefox returns <body>).
+  // - The element is <body> or <html>.
+  const offsetRect = offsetParent?.getBoundingClientRect() ?? { x: 0, y: 0 };
   return {
     x: rect.x - offsetRect.x,
     y: rect.y - offsetRect.y,