From 4f1de3918bab02b39145c480726e06a2d151e760 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Thu, 21 Aug 2025 18:00:09 -0400
Subject: [PATCH] Fix button positioning for real (#1361)

---
 packages/webawesome/src/components/button/button.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/webawesome/src/components/button/button.css b/packages/webawesome/src/components/button/button.css
index 4bb79f2b2..a3b0e1783 100644
--- a/packages/webawesome/src/components/button/button.css
+++ b/packages/webawesome/src/components/button/button.css
@@ -1,8 +1,17 @@
 @layer wa-component {
   :host {
     display: inline-block;
+
+    /* Workaround because Chrome doesn't like :host(:has()) below
+     * https://issues.chromium.org/issues/40062355 
+     * Firefox doesn't like this nested rule, so both are needed */
+    &:has(wa-badge) {
+      position: relative;
+    }
   }
 
+  /* Apply relative positioning only when needed to position wa-badge
+   * This avoids creating a new stacking context for every button */
   :host(:has(wa-badge)) {
     position: relative;
   }