diff options
| -rw-r--r-- | .changeset/silent-wasps-learn.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/runtime/client/dev-overlay/overlay.ts | 9 |
2 files changed, 12 insertions, 2 deletions
diff --git a/.changeset/silent-wasps-learn.md b/.changeset/silent-wasps-learn.md new file mode 100644 index 000000000..60f8d4c0e --- /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 91ba7e279..f85972418 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; } } |