From ede3f7fef6b43a08c9371f7a2531e2eef858b94d Mon Sep 17 00:00:00 2001
From: Alex Nguyen <dev@alexnguyen.co.nz>
Date: Fri, 29 Dec 2023 18:59:01 +1300
Subject: [PATCH] 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>
---
 .changeset/silent-wasps-learn.md                         | 5 +++++
 packages/astro/src/runtime/client/dev-overlay/overlay.ts | 9 +++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/silent-wasps-learn.md

diff --git a/.changeset/silent-wasps-learn.md b/.changeset/silent-wasps-learn.md
new file mode 100644
index 0000000000..60f8d4c0ef
--- /dev/null
+++ b/.changeset/silent-wasps-learn.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Toggle dev toolbar hitbox height when toolbar is visible
diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
index 91ba7e2793..f85972418a 100644
--- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts
+++ b/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;
 		}
 	}