diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 87336ce167..b3c0fa07c8 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -268,7 +268,6 @@
 		color: var(--sk-fg-3);
 		line-height: 1;
 		background-size: 1.8rem;
-		z-index: 999;
 
 		&.login {
 			width: auto;
diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css
index cca16ba466..99a237a425 100644
--- a/packages/site-kit/src/lib/styles/utils/buttons.css
+++ b/packages/site-kit/src/lib/styles/utils/buttons.css
@@ -91,6 +91,7 @@ button > span.icon {
 
 button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
 	--arrow-size: 1rem;
+	--pseudo-index: 2;
 
 	&::before {
 		content: '';
@@ -101,6 +102,7 @@ button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
 		top: calc(100% + var(--arrow-size) * 0.5);
 		left: calc(50% - var(--arrow-size) * 0.5);
 		rotate: 45deg;
+		z-index: var(--pseudo-index);
 	}
 
 	&::after {
@@ -116,6 +118,7 @@ button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
 		font: var(--sk-font-ui-small);
 		text-transform: none;
 		white-space: pre;
+		z-index: var(--pseudo-index);
 	}
 
 	&.tooltip-left::after {