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 a1b6917141..ba1c38d252 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -283,7 +283,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 90b6858292..9d98cfa08b 100644
--- a/packages/site-kit/src/lib/styles/utils/buttons.css
+++ b/packages/site-kit/src/lib/styles/utils/buttons.css
@@ -76,6 +76,7 @@
 
 button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
 	--arrow-size: 1rem;
+	--pseudo-index: 2;
 
 	&::before {
 		content: '';
@@ -86,6 +87,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 {
@@ -101,6 +103,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 {