Toggle dev toolbar hitbox height when toolbar is visible (#9446)

* Toggle dev toolbar hitbox height when toolbar is visible

* Add hitbox above height const

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

Author: alexnguyennz

.changeset/silent-wasps-learn.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Toggle dev toolbar hitbox height when toolbar is visible

packages/astro/src/runtime/client/dev-overlay/overlay.ts

@@ -18,6 +18,7 @@ export type DevOverlayPlugin = DevOverlayPluginDefinition & {
 const WS_EVENT_NAME = 'astro-dev-toolbar';
 const WS_EVENT_NAME_DEPRECATED = 'astro-dev-overlay';
 const HOVER_DELAY = 2 * 1000;
+const DEVBAR_HITBOX_ABOVE = 42;
 
 export class AstroDevOverlay extends HTMLElement {
 	shadowRoot: ShadowRoot;
@@ -80,7 +81,7 @@ export class AstroDevOverlay extends HTMLElement {
 				pointer-events: auto;
 			}
 			#dev-bar-hitbox-above {
-				height: 42px;
+				height: ${DEVBAR_HITBOX_ABOVE}px;
 			}
 			#dev-bar-hitbox-below {
 				height: 16px;
@@ -149,7 +150,7 @@ export class AstroDevOverlay extends HTMLElement {
 				border-radius: 4px;
 				padding: 4px 8px;
 				position: absolute;
-				top: 4px;
+				top: ${4 - DEVBAR_HITBOX_ABOVE}px;
 				font-size: 14px;
 				opacity: 0;
 				transition: opacity 0.2s ease-in-out 0s;
@@ -492,16 +493,20 @@ export class AstroDevOverlay extends HTMLElement {
 	setOverlayVisible(newStatus: boolean) {
 		const barContainer = this.shadowRoot.querySelector<HTMLDivElement>('#bar-container');
 		const devBar = this.shadowRoot.querySelector<HTMLDivElement>('#dev-bar');
+		const devBarHitboxAbove =
+			this.shadowRoot.querySelector<HTMLDivElement>('#dev-bar-hitbox-above');
 		if (newStatus === true) {
 			this.devOverlay?.removeAttribute('data-hidden');
 			barContainer?.removeAttribute('inert');
 			devBar?.removeAttribute('tabindex');
+			if (devBarHitboxAbove) devBarHitboxAbove.style.height = '0';
 			return;
 		}
 		if (newStatus === false) {
 			this.devOverlay?.setAttribute('data-hidden', '');
 			barContainer?.setAttribute('inert', '');
 			devBar?.setAttribute('tabindex', '0');
+			if (devBarHitboxAbove) devBarHitboxAbove.style.height = `${DEVBAR_HITBOX_ABOVE}px`;
 			return;
 		}
 	}